如何实现图片居中并叠加的效果?

wjnds
  • 181

有abc三张png图片,如何让它们水平居中并叠加在一起?

回复
阅读 4.6k
3 个回答
levelup
  • 80
✓ 已被采纳

先上图,不知道是不是你要的效果
图片描述

<head>
<style>
.div1 {
  width: 100px;
  height: 100px;
  position: absolute;
  display: flex;
  justify-content: center;
}

.img1{
  position: relative;
  width: 70px;
  height: 70px;
  background: #f00;
}

.img2{
  position: relative;
  width: 50px;
  height: 50px;
  background: #0f0;
}

.img3{
  position: relative;
  width: 30px;
  height: 30px;
  background: #00f;
}

.img2 {
  position: 
}
</style>
</head>

<body>
<div class="div1">
  <div class="img1"></div>
</div>
<div class="div1">
  <div class="img2"></div>
</div>
<div class="div1">
  <div class="img3"></div>
</div>
</body>

clipboard.png

 <div class="wrapper">
    <img class="a">
    <img class="b">
    <img class="c">
  </div>
 <style>
    .wrapper {
      width: 100%;
    }
    img {
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
    }
    .a {
      width: 30px;
      height: 30px;
      background: #333;
      z-index: 2;
    }
    .b {
      width: 60px;
      height: 60px;
      background: #666;
      z-index: 1;
    }
    .c {
      width: 90px;
      height: 90px;
      background: #999;
    }
  </style>
wjnds
  • 181

图片显示于屏幕中间并叠加:

<style>
.wrapper {
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
}
img {
    width: 100%;
    max-width: 1000px;
    float: left;
}
  </style>

<div class="wrapper">
  <div style="position: relative;">
    <img src="a.png">
  </div>
  <div style="position: absolute;">
    <img src="b.png">
  </div>
  <div style="position: absolute;">
    <img src="c.png">
  </div>
</div>
宣传栏