Question

如果您可以在http://www.acehbus.com查看片刻，您可以看到iPhone的屏幕截图图像在屏幕上完全显示。我想知道如何使图像的一半覆盖下一个div，就像在http://sociali.st中一样。我尝试过z-index，但它没有用。谢谢你的帮助。

Answer 1

首先，您可以随时检查您想要实现的效果的网站，并尝试在项目中应用它的方法。标记和样式可直接访问。如果您在示例中注意到，您提供的重叠效果是通过负边距和绝对定位的组合实现的。因此，如果您使用这些属性，您将会成功。我会选择这样的东西：

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

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

看，我做了一些实验并制作了this小提琴

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执行此操作，首先为您案例parent element中的图片的col-md-6提供固定的高度。所以做类似的事情。

.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>

将图片叠加到另一个div

3 个答案: