將圖片疊加到另一個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>