在css中覆盖一个图像与另一个图像

我有4个图像连续。我希望将第三张图片叠加在第二张图片的上方，但尚未能成功将其运行。这里是我的小提琴：在css中覆盖一个图像与另一个图像

<div style="width:1000px"> 
    <div class="x"> 
     <img src="http://25.media.tumblr.com/avatar_dae559818d30_128.png" /> 
    </div> 
    <div class="x"> 
     <img src="http://scottsdalepethotel.com/wp-content/uploads/et_temp/cat-648150_128x128.jpg" /> 
    </div> 
    <div class="x"> 
     <img src="http://playgo.ro/wp-content/themes/play3.0/play.png" /> 
    </div>  
    <div class="x"> 
     <img src="http://blog.sureflap.com/wp-content/uploads/2011/11/Maru.jpg" /> 
    </div>   
</div>

来源

2013-12-19 AndroidDev

添加在表演图像中第二个div和使用position absolute和relative使它一个以上的另一个。

.x{ 
    border:1px solid #000000; 
    display:inline-block; 
    height:128px; 
    position:relative 
} 
.overlay_img{ 
    position:absolute; 
    top:0; 
    left:0 
}

DEMO

来源

2013-12-19 06:28:30 Sowmya

如果你只是希望它是在第2图像，然后包装在1个格的2个图像，并给它position:relative然后给你的图像2和图像分别为3 position:absolute和z-index:0 & z-index:1。并将它们定位到top:0; & left:0;应该这样做:)

来源

2013-12-19 06:29:00 Nishant

如果您可以使用现代CSS，并且只需要第三张图片叠加第二张图片（如在中，您不需要在很多地方重复该图案），您可以使用第n个孩子选择：

.x:nth-child(3) { 
    margin-left: -136px; 
}

这将选择与x类的第三个项目，并将其移动到左边。

来源

2013-12-19 06:32:13 rescuecreative

如果使用margin或position属性，可以实现叠加来看，

看看http://jsfiddle.net/manojmcet/Z7Y88/

来源

2013-12-19 06:39:57 Manoj

在css中覆盖一个图像与另一个图像

回答

相关问题