在Bootstrap中使用Div顯示文本圖像

我試過在圖像上用下面的代碼顯示文本，如下所示：在Bootstrap中使用Div顯示文本圖像

<div class="wrapper"> 
<img src="https://cdn0.vox- cdn.com/thumbor/qLH7593e3D2SSSIdkwgBWdYhjjk=/289x0:802x684/400x533/filters:forma t(webp)/cdn0.vox-cdn.com/uploads/chorus_image/image/47859707/6621139883_e6be6a217a_b__1_.0.0.jpg" alt="" /> 
<div class="overlay"> 
    <h2>Restaurant Stowaway Devours $800 of Roast Goose and Wine</h2> 

</div> 
</div>

CSS

body { 
    text-align: center; 
} 

.wrapper { 
    display: inline-block; 
    margin-top: 25px; 
    position: relative; 
} 

.wrapper img { 
    display: block; 
    max-width:100%; 
} 

.wrapper .overlay { 
    position: absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background-color: rgba(0,0,0,0.25); 
    color:white; 
}

但它出來是這樣的：

請幫我，你有什麼我錯過了？因爲我希望輸出像上面顯示的第一個圖像。

來源

2015-12-13 Solomon david

創建一個div元素，其中有該圖像作爲背景！之後，在另一個div框中添加文本。嘗試調整寬度並將其移動到底部。 –

您必須將類添加到您的標題h2標記並向其添加以下樣式。添加以下類，

<h2 class="header">Restaurant Stowaway Devours $800 of Roast Goose and Wine</h2> 

h2.header { 
    bottom: 0; 
    position: absolute; 
    text-align: center; 
    width: 100%; 
}

來源

2015-12-13 13:39:23

它的作品謝謝你。 –

在Bootstrap中使用Div顯示文本圖像

回答

相關問題