z-index与css多背景图

最新推荐文章于 2023-04-24 10:50:07 发布

chenke__hxx

最新推荐文章于 2023-04-24 10:50:07 发布

阅读量2.1k

点赞数

分类专栏： css 文章标签： z-index css多背景图

本文链接：https://blog.csdn.net/chenke__hxx/article/details/9564333

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

即左上角的排名数字是可以随便填的，左上角的红色区域，中间的点击图标是可以通过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