CSS如何在圖像底部添加文字標題？

Question

我對CSS非常陌生，並且嘗試在圖像底部添加一個文本標題，如下所示：

我在3個不同的引導列中有3張圖像。

 .img-preview { display: block; margin: 0 auto; object-fit: cover; min-height: 300px; max-width: 350px; } .img-container { width: 100%; height: auto; padding: 0; background-position: center top; } 

 <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="col-md-4 col-sm-6"> <img class="img-container img-preview" src="../img/Referenzen_Stimmungsbild.jpg"> <h3><span>Maler<br />und<br />Tapezierarbeiten</span></h3> </div> <div class="col-md-4 col-sm-6"> <img class="img-container img-preview" src="../img/Referenzen_Stimmungsbild.jpg"> </div> <div class="col-md-4 col-sm-6"> <img class="img-container img-preview" src="../img/Referenzen_Stimmungsbild.jpg"> </div> </div> 

我嘗試了很多可能的解決方案，但沒有任何實際效果。 例如，嘗試過https://css-tricks.com/text-blocks-over-image/，但是當我調整窗口大小時，文本標題不再適合。

達到此效果的最佳方法是什么？

Answer 1

您可以使用Position:absolute ，請嘗試使用此答案

 .relative_box { position:relative; width:400px; float:left; } .relative_box img { width:100%; } .relative_box h3 { position:absolute; bottom:0; left:0; background:#000; color:#fff; width:100%; margin:0; } 

 <div class="relative_box"> <img src="https://www.wired.com/wp-content/uploads/2015/09/google-logo.jpg" alt="" /> <h3><span>Maler<br />und<br />Tapezierarbeiten</span></h3> </div> 

Answer 2

您可以使用CSS Positioning做到這一點。 但是您需要稍微改變一下結構。 看看下面的代碼片段：

 .img-holder { min-height: 300px; max-width: 350px; margin: 0 auto; position: relative; } .img-holder h3 { display: flex; justify-content: center; align-items: center; position: absolute; background: rgba(65, 55, 91, 0.8); color: white; bottom: 0; left: 0; width: 80%; height: 30%; margin: 0; padding: 10px; text-align: center; } .img-preview { display: block; margin: 0 auto; object-fit: cover; min-height: 300px; max-width: 350px; } .img-container{ width: 100%; height: auto; padding: 0; background-position: center top; } 

 <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="col-md-4 col-sm-6"> <div class="img-holder"> <img class="img-container img-preview" src="http://placehold.it/200x200"> <h3><span>Maler<br />und<br />Tapezierarbeiten</span></h3> </div> </div> <div class="col-md-4 col-sm-6"> <div class="img-holder"> <img class="img-container img-preview" src="http://placehold.it/200x200"> <h3><span>Maler<br />und</span></h3> </div> </div> </div> 

希望這可以幫助！