在網(wǎng)頁(yè)設(shè)計(jì)和開(kāi)發(fā)中，經(jīng)常會(huì)遇到需要將文字放在圖片下方的情況。這時(shí)就需要使用CSS來(lái)實(shí)現(xiàn)。下面來(lái)看一下具體的實(shí)現(xiàn)方法。

<div class="image-container">
<img src="image.jpg" alt="Image">
<p class="caption">這是一段圖片的描述文本。</p>
</div>

首先，我們需要?jiǎng)?chuàng)建一個(gè)容器元素，用來(lái)包含圖片和文字。在這個(gè)容器元素中，我們可以使用img標(biāo)簽來(lái)插入圖片，同時(shí)使用p標(biāo)簽來(lái)插入文本。

接下來(lái)，我們需要使用CSS來(lái)對(duì)容器元素和文本進(jìn)行格式化。

.image-container {
position: relative;
}
.caption {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding: 10px;
background-color: rgba(0, 0, 0, 0.5);
font-size: 18px;
color: #fff;
text-align: center;
box-sizing: border-box;
}

我們首先給容器元素設(shè)置position: relative，這樣文本的position: absolute屬性就可以相對(duì)于容器元素定位了。

然后對(duì)文本進(jìn)行一系列的屬性設(shè)置。我們將文本的寬度設(shè)置為100%，底部和左邊的值設(shè)置為0，這樣文本就會(huì)放在圖片的底部。為了讓文本更加美觀，我們?cè)O(shè)置了背景色、字體大小、顏色和文本居中。同時(shí)，我們還設(shè)置了box-sizing: border-box，以確保padding值不會(huì)影響文本的寬度。

通過(guò)如上的設(shè)置，我們就可以將文本放在圖片下方了?？梢愿鶕?jù)實(shí)際需求進(jìn)行CSS的調(diào)整，以達(dá)到最佳效果。