堆叠一些图像 [英] Stacking some images

问题描述

在我的代码，我想能够堆叠图像

$ b $

我尝试过使用浮动和z-index

问题我如何获得它，所以我的图片像上面的例子？

工作 DEMO < - 更新工作解决方案

 < div class =container> 
< div class =row> 
 
< div class =col-lg-12> 
< img data-src =holder.js / 50px320？theme = socialclass =img-thumbnail img-1> 
< img data-src =holder.js / 50px320？theme = lavaclass =img-thumbnail img-2> 
< img data-src =holder.js / 50px320？theme = greyclass =img-thumbnail img-3> 
< / div> 
 
< / div> 
< / div> 
  

CSS

  .img-1 {
 z-index：2; 
 float：none; 
 clear：both; 
} 
 
 .img-2 {
 float：left; 
 z-index：1; 
} 
 
 .img-3 {
 float：right; 
 z-index：1; 
} 
  

解决方案

p>

  .img-1 {display：block; position：absolute; left：0; top：30px; z-index：-1;}。img-2 {display：block; position：absolute; top：30px; right：0; z-index：-1;}。img-3 {display：block;位置：相对; z-index：1; margin：0 auto;}  

 < script src = https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js\"> ;</script><script src =https://cdnjs.cloudflare.com/ajax /libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js\"> ;</script> ;<script src =https://cdnjs.cloudflare.com/ajax/libs/holder/2.9。 4 / holder.min.js>< / script>< div class =container> < div class =row> < div class =col-lg-12> < img data-src =holder.js / 50px320？theme = socialclass =img-thumbnail img-1> < img data-src =holder.js / 50px320？theme = lavaclass =img-thumbnail img-2> < img data-src =holder.js / 50px320？theme = greyclass =img-thumbnail img-3> < / div> < / div>< / div>  

On my code I am trying to be able to stack images like

Where there are 2 images behind and one on top.

I have tried using floats and z-index

Question how can I get it so my images are like in the above example?

WORKING DEMO <-- Updated with working solution

<div class="container">
<div class="row">

<div class="col-lg-12">
<img data-src="holder.js/50px320?theme=social" class="img-thumbnail img-1">
<img data-src="holder.js/50px320?theme=lava" class="img-thumbnail img-2">
<img data-src="holder.js/50px320?theme=grey" class="img-thumbnail img-3">
</div>

</div>
</div>

CSS

.img-1 {
   z-index: 2;
   float: none;
   clear: both;
}

.img-2 {
   float: left; 
   z-index: 1;
}

.img-3 {
   float: right; 
   z-index: 1;
}

解决方案

Here's another solution:

.img-1 {
  display: block;
  position: absolute;
  left: 0;
  top: 30px;
   z-index: -1;
}

.img-2 {
  display: block;
  position: absolute;
  top: 30px;
  right: 0;
  z-index: -1;
}

.img-3 {
  display: block;
  position: relative;
  z-index: 1;
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <img data-src="holder.js/50px320?theme=social" class="img-thumbnail img-1">
      <img data-src="holder.js/50px320?theme=lava" class="img-thumbnail img-2">
      <img data-src="holder.js/50px320?theme=grey" class="img-thumbnail img-3">
    </div>
  </div>
</div>

这篇关于堆叠一些图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！