圖像重疊的BG圖像和/或DIV

我想合併一個位於現有圖像頂部的圖像（也許跨過兩個不同的div。一般來說，我只想看看你會建議什麼樣的通用html結構 - 以及我應該包括的任何CSS規則，我花了幾個小時試圖複製我想要的結構 - 但是在檢查元素並嘗試去構建和重構後，我無法生成任何接近我想要的東西的東西。圖像重疊的BG圖像和/或DIV

此外，在下面提供的示例中 - 我注意到重疊的圖像被放置在span標籤內，任何想法爲什麼？如果您可以粗略地描述您將如何處理這種設計 - 那會很棒！

來源

2016-08-14 whr2206

這是一個非常整潔的效果。這是單程您可以做的多個。訣竅是在背景上具有固定高度的div，並在其中包含另一個包含圖像的div。

我試着保持高度/寬度非常小，以便您可以在嵌入的片段上正確檢查它們。我試圖儘可能減少樣式以重新創建你所要求的內容。

讓我知道如果這樣的事情做的工作。

.first-image{ 
 
    background: #eee; 
 
    height: 250px; 
 
} 
 
.container{ 
 
    width: 95%; 
 
    margin: 0 auto; 
 
    max-width: 400px; 
 
} 
 
.container--padding{ 
 
    padding: 1rem 0; 
 
} 
 
.second-image{ 
 
    margin: 2rem auto; 
 
}

<header> 
 
    <div class="first-image"> 
 
    <div class="container container--padding"> 
 
     <h2>I'm the cool title headline.</h2> 
 
     <button>Download</button> 
 
    </div> 
 
    <div class="second-image"> 
 
     <div class="container"> 
 
     <img src="http://placehold.it/400x190" alt="placeholder" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</header>

來源

2016-08-14 10:17:57

謝謝！此解決方案似乎正在工作。對圖像進行定中心怎麼樣？我看到左右邊距被設置爲自動 - 但圖像仍偏離中心。 – whr2206

如果你的圖像仍然是內嵌或內聯塊，你可能想在父級上使用'text-align：center'。如果你的圖像設置爲'block'，你可以將'margin-left'和'margin-right'設置爲'auto'是的。 –

在您指的例子中，圖像不<img />標籤，但<div />重疊在彼此的頂部。這兩個<div />都有一個背景圖片。

有多種解決方案，使2點<div />重疊，你可以使用絕對定位，浮動，切緣陰性，具有高度比背景圖像的高度更大父<div />背景等

例如，使用負邊緣，如果我有2 <div />以下對方喜歡：

<div class="bg1"></div> 
<div class="bg2"></div>

我可以簡單地負上邊距添加到第二個，使其出現在第一個，得到一種幻覺的頂重疊如：

.bg2 { 
    margin-top: -40px; 
}

您可以在this JSFiddle上檢查使用負邊距的示例。

來源

2016-08-14 10:18:48 HiDeo

圖像重疊的BG圖像和/或DIV

回答

相關問題