z-index与css多背景图

来源：互联网发布：mac cs1.6 编辑：程序博客网时间：2024/05/16 07:11

在这个周的实习中需要实现如下一个功能

即左上角的排名数字是可以随便填的，左上角的红色区域，中间的点击图标是可以通过css可以修改，这个需要通过z-index来设置各个图层的深度，具体代码如下，大家可以参考

 <html> <head>  <style type="text/css">  .wrap{  width: 240px;  height: 240px;margin: 0px auto;  background-color: #ccc;overflow: hidden;  }  .top_left{  z-index: 100;  width: 48px;  height: 48px;  background: url(paihang.png);  top:-60px;  left:0px;  position: relative;  }  .center{  z-index: 100;  width: 48px;  height: 48px;  background: url(dianji.png);  top:-20px;  left: 90px;  position: relative;  }  .paiming{  z-index: 101;  top: -15px;  left:10px;  position: relative;  }  img{  width:240px;height: 240px;top: -155px;left:0px;position: relative;  }  </style> </head> <body>  <div class="wrap">  <div class="paiming"><h3>1</h3></div>  <div class="top_left"></div>  <div class="center"></div>  <img src="1.jpg" alt="">  </div> </body>大家可以发现其中，红色区域和点击图标是分开设置，但其实完全可以通过一个图层来实现，不过这就需要使用多背景图了。关键代码：.box{  z-index: 100;  width: 240px;  height: 240px;  top: -58px;  position: relative;  background: url(paihang.png) no-repeat left top,  url(dianji.png) no-repeat center center;  } <html> <head>  <style type="text/css">  .wrap{  width: 240px;  height: 240px;margin: 0px auto;  background-color: #ccc;overflow: hidden;  }  .box{  z-index: 100;  width: 240px;  height: 240px;  top: -58px;  position: relative;  background: url(paihang.png) no-repeat left top,  url(dianji.png) no-repeat center center;  }  .paiming{  z-index: 101;  top: -15px;  left:10px;  position: relative;  }  img{  width:240px;height: 240px;top: -301px;left:0px;position: relative;  }  </style> </head> <body>  <div class="wrap">  <div class="paiming"><h3>1</h3></div>  <div class="box"></div>  <img src="1.jpg" alt="">  </div> </body>

具体源文件在：http://pan.baidu.com/share/link?shareid=2881317635&uk=1998297189