將圖像疊加到另一個div

如果您可以看一下http://www.acehbus.com，您可以看到屏幕上完全顯示了iPhone的屏幕截圖。我想知道如何使圖像的一半覆蓋下一個div，如http://sociali.st。我試過z-index，但不起作用。感謝您的幫助。將圖像疊加到另一個div

來源

2016-03-15 chronycles

我通過您的網站有，我有兩件事情：

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;}

來源

2016-03-15 15:13:47 Zorak

哈哈我也這麼認爲，兄弟。這是版本跛腳，我會努力工作來製作下一個版本。謝謝！ – chronycles

歡迎您:)如果此答案適合您，請將其標記爲最終答案。還有一點需要注意：你可以定義高度：100％和最小高度，例如200px。然後，如果文字比圖像短，圖像將是200px。如果文字比圖像長，則會顯示整幅圖像。 - 如果你將保存你現在有div結構 - 新的div將在主div的subcontainer與文字和圖像。 – Zorak

還有一件事，如果你看看每個截圖的文本，我不知道如何垂直對齊文本，即使我嘗試了垂直對齊的中間，所以我必須填充到100-200px頂部文本。問題出現在移動設備上時，它的頂部空間很大。從你的角度來看，如何垂直對齊？我應該在col-md-8 div中有另一個文本div嗎？謝謝！ – chronycles

首先，您可能會經常檢查一個您想要實現的效果的網站，並嘗試將其應用於您的項目。標記和樣式可以直接訪問。如果您在示例中注意到您已經提供了重疊效果，則可以結合使用負邊距和絕對定位。所以，如果你玩這些屬性，你會做到這一點。我會去這樣的事情：

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

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

看，我做了一些實驗，並取得this小提琴

來源

2016-03-15 15:06:30 markoffden

酷，我喜歡這個主意！謝謝 – chronycles

你可以做，使用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>

來源

2016-03-15 15:15:16

將圖像疊加到另一個div

回答

相關問題