CSS是前端開發(fā)中不可或缺的一部分，它可以幫助我們美化頁(yè)面，添加樣式，包括在圖片下添加文字。今天我們就來(lái)學(xué)習(xí)如何在圖片下方添加文字。

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

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

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

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

通過(guò)CSS添加文字，可以為我們的頁(yè)面增添美感，使頁(yè)面更加生動(dòng)、有趣。現(xiàn)在您只需按照上述步驟設(shè)計(jì)樣式即可在圖片下添加文字。