CSS是前端開發中必不可少的一部分，它可以幫助我們實現各種復雜的頁面效果。其中，使用CSS將文字放在圖片的下面也是常見的一種情況。下面就讓我們來學習一下CSS如何實現這種效果。

// HTML代碼
<div class="image-container">
<img src="picture.jpg">
<p>這是圖片下面的文字</p>
</div>
// CSS代碼
.image-container {
position: relative;
}
.image-container img {
display: block;
max-width: 100%;
}
.image-container p {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
background-color: rgba(0,0,0,0.5);
color: white;
font-size: 16px;
text-align: center;
}

首先，我們需要一個包含圖片和文字的容器，這里使用了一個div標簽，并為其設置了一個類名。接下來，我們需要使用CSS的定位屬性，將文字放在圖片的下方。

首先，為包含圖片的容器設置position:relative;屬性，以便為后面的絕對定位提供參照。然后，給圖片添加display:block;和max-width:100%;這兩個屬性，可以使其在容器中水平居中，并保證其大小不超過容器的寬度。接下來，我們為文本內容添加position:absolute;以脫離文檔流，并使用bottom:0;left:0;right:0;將其定位在圖片下方。此外，我們還為文本添加了一個padding屬性和一個背景顏色為半透明黑色的背景，以便讓文本內容更加醒目。最后，我們可以通過color、font-size、text-align等CSS屬性來控制文本的樣式。

通過上述CSS代碼的編寫，我們就可以將文字放在圖片的下面，實現一個漂亮的效果。