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

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


纯CSS+HTML打造图片相框背景_第1张图片

这是在页面上的效果

纯CSS+HTML打造图片相框背景_第2张图片

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

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


你可能感兴趣的:(html,css,特效,相框背景特效)