CSS是前端開發中不可或缺的一部分，它可以幫助我們美化頁面，添加樣式，包括在圖片下添加文字。今天我們就來學習如何在圖片下方添加文字。

.img-container {
position: relative;
/* 設置容器定位 */
}
.img-text {
position: absolute;
/* 設置文字定位 */
bottom: 0;
/* 距離底部為0 */
left: 0 ;
/* 距離左側為0 */
right: 0;
/* 距離右側為0 */
background-color: rgba(0, 0, 0,0.5);
/* 背景顏色，這里使用半透明黑色 */
color: white;
/* 字體顏色 */
padding: 10px;
/* 內邊距 */
text-align: center;
/* 文字居中 */
}

首先我們需要給容器設置定位，可以選擇relative相對定位或者absolute絕對定位，這里我們使用relative相對定位。接著我們創建一個div作為容器，div內包含圖片和文字。需要注意的是，容器中的圖片和文字必須使用絕對定位。

<div class="img-container">
<img src="example.jpg">
<div class="img-text">text here</div>
</div>

代碼中，我們使用了img標簽插入圖片，然后用div標簽插入文字。在div中添加文本時，我們使用了img-text類，這個類是用來設置文字的樣式的。在樣式中，我們將文字定位到了圖片下方，并設置了背景顏色、文本顏色、內邊距和文本居中。

通過CSS添加文字，可以為我們的頁面增添美感，使頁面更加生動、有趣。現在您只需按照上述步驟設計樣式即可在圖片下添加文字。