CSS DIV大图片右上角叠加小图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>CSS Borders DIV大图片右上角叠加小图片</title>
<meta name="author" content="Geovin Du 涂聚文"/>
<style type="text/css">
.geovindu
{
    width:415px;
    height:415px;
    border:2px solid;
    filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true);
    border-radius:25px;
    box-shadow: 10px 10px 5px #888888;/*IE 無效*/
    border-image:url(border.png) 30 30 round;
    -moz-border-image:url(border.png) 30 30 round; /* Firefox */
    -webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
    -o-border-image:url(border.png) 30 30 round; /* Opera */
}
</style>
</head>
 
<body>
<div style="width:215px;height:215px;position: relative;border:0px;">
<div style="width:49px;height:45px;position:absolute;top:5px; right:10px; border:0px; "><img src="bt3.png" style="border:0px;" alt="hi"/></div>
<img src="01.jpg" style="border:0px;" alt="hi,how are you"/>
</div>
<div class="geovindu"></div>
</body>
 
</html>

 

posted @   ®Geovin Du Dream Park™  阅读(3500)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!
< 2011年11月 >
30 31 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 1 2 3
4 5 6 7 8 9 10
点击右上角即可分享
微信分享提示