将图片叠加到另一个div中

Question

如果您可以在http://www.acehbus.com上浏览一下，您会看到iPhone屏幕快照在屏幕上完全可见。 我想知道如何使图像的一半覆盖下一个div，就像在http://sociali.st中一样 。 我已经尝试过z-index，但是它不起作用。 感谢您的帮助。

Answer 1

首先，您可能总是会检查您想要达到的效果的站点，并尝试将其方法应用于您的项目中。 标记和样式可直接访问。 如果您在示例中注意到，您已经提供了重叠效果，可通过负边距和绝对定位的组合来实现。 因此，如果您使用这些属性，就可以做到。 我会去这样的事情：

<div class="iphone"></div>

.iphone {
    bottom: -100px;
    position: relative;
}

看，我做了一些实验，做了这个小提琴

Answer 2

我浏览了您的网站，有两件事：

1）不要使用分辨率为649x1323的图像。 这样大小的一半就可以了..这款手机有很多图像，连接速度较慢的人会因此丧命。 而且它仍然仅用作较小的拇指，因此实际上没有必要使用较大的分辨率。

2）您使用图像本身。 请改用div，并以图片为背景。 看到这个小提琴： https : //jsfiddle.net/8xhucpx8/

div.image{
  width:300px; 
height:200px;
background-image:url('http://www.acehbus.com/img/search.png');
background-position:top center; 
background-size:100% auto;    
background-repeat:no-repeat;}

Answer 3

您可以使用overflow: hidden来做到这一点overflow: hidden在您的案例col-md-6先将overflow: hidden赋予图像的parent element固定的高度。 所以做类似的事情。

 .col-md-6 { height: 155px; overflow: hidden; } 

 <div class="col-md-6"> <img src="http://www.acehbus.com/img/search.png" alt="" width="200px" /> </div>