z-index与css多背景图

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

chenke__hxx

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

阅读量2k

点赞数

分类专栏： 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

chenke__hxx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
z-index与css多背景图

在这个周的实习中需要实现如下一个功能即左上角的排名数字是可以随便填的，左上角的红色区域，中间的点击图标是可以通过css可以修改，这个需要通过z-index来设置各个图层的深度，具体代码如下，大家可以参考 .wrap{ width: 240px; height: 240px;margin: 0px auto; background-
复制链接

扫一扫

专栏目录