纯CSS+HTML打造图片相框背景

最新推荐文章于 2024-07-10 16:05:14 发布

weixin_34290096

最新推荐文章于 2024-07-10 16:05:14 发布

阅读量1k

点赞数

文章标签： xhtml

原文链接：https://my.oschina.net/yyqz/blog/269588

版权

为什么80%的码农都做不了架构师？>>>

通过纯html+css打造相框效果：

这是在页面上的效果

传统的做法是使用背景图片的方式进行，下面是另类方法，亲测，兼容性还是很不错的：

HTML代码：

 <div class="imgWrap w190">
     <div class="bg1"></div>
     <div class="bg2"></div>
     <div class="imgDiv">
      <div><a href="#"><img src="images/default-xk.jpg" /></a></div>
     </div>
    </div>

CSS部分：

*{margin:0px;padding:0px;}
.w190{width:190px;}
.imgWrap{position:relative;margin-left:2px;margin-right:2px;z-index:90;float:right;}
.imgWrap .bg1{position:absolute;right:-3px;bottom:-3px;background-color:#E3E3E3;width:100%;height:100%;z-index:91;}
.imgWrap .bg2{position:absolute;left:-3px;top:-3px;background-color:#fff;width:100%;height:100%;border:1px solid #E3E3E3;z-index:92;}
.imgWrap .imgDiv{width:100%;height:100%;position:relative;z-index:98;}
.imgWrap .imgDiv div{width:100%;height:100%;padding:10px 13px 13px 7px;}
.imgWrap .imgDiv div img{}
.imgWrap .info{position:relative;z-index:99;padding:10px;}

记得在html页面头上加：

<!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">

转载于:https://my.oschina.net/yyqz/blog/269588