Html 将图像覆盖到另一个div中

如果你能看一会儿，你会发现iPhone的截图图像完全可以在屏幕上看到。我想知道如何使图像的一半覆盖在下一个div上，就像。我试过z-index，但不起作用。谢谢你的帮助

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

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

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

.iphone{
底部：-100px；
位置：相对位置；
}

---

听着，我做了一些实验，做了小提琴，我通过你的网站，我有两件事：

1） 不要使用分辨率为649x1323的图像。那种尺寸的一半就可以了。。这部手机有很多图像，连接速度较慢的人会因此死亡。而且它仍然只是作为较小的拇指使用，所以大分辨率确实是不必要的

2） 您使用图像作为其本身。改为使用div，并将图像作为其背景。看这把小提琴：

---

您可以使用

overflow:hidden

首先为您的案例中的图像的

父元素
指定一个固定高度
col-md-6
。所以做点类似的事情


.col-md-6{
高度：155px；
溢出：隐藏；
}

酷，我喜欢这个主意！谢谢你，我也这么想，兄弟。这是lame的版本，我将努力制作下一个版本。谢谢不客气：）如果这个答案适合你，请把它标记为最终答案。还有一个注意事项：您可以定义高度：100%和最小高度，例如200px。然后，如果文本比图像短，则图像将为200px。如果文本比图像长，则显示整个图像-如果您将保留现有的div结构，新div将位于主div的子容器中，包含文本和图像。还有一件事，如果您查看每个屏幕截图的文本，我不知道如何将文本垂直对齐，即使我尝试了垂直对齐中间，所以我必须从文本顶部填充到100-200px。当在手机上观看时，上面有很多空间，问题就来了。从您的角度来看，如何垂直对齐？col-md-8 div中的文本是否应该有另一个div？谢谢对于垂直对齐，必须先定义线高度。。。而且正确地做这件事是一种炼金术。。。。尝试使用值，但垂直对齐需要线高度。
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;}