CSS技術(shù)可以幫助我們實(shí)現(xiàn)很多美觀實(shí)用的效果，其中一種就是在圖片上方添加文本框。下面我們將介紹如何使用CSS實(shí)現(xiàn)這種效果。

/* HTML代碼 */
<div class="image-with-text">
<img src="image.jpg" alt="圖片">
<div class="text">
<p>文本內(nèi)容</p>
</div>
</div>
/* CSS代碼 */
.image-with-text {
position: relative;
}
.image-with-text .text {
position: absolute;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
}

首先，在HTML中需要?jiǎng)?chuàng)建一個(gè)包含圖片和文本框的div容器。我們?yōu)樵撊萜魈砑右粋€(gè)類(lèi)名“image-with-text”，以便可以在CSS中進(jìn)行樣式設(shè)置。

接下來(lái)，我們需要在這個(gè)div容器中添加兩個(gè)子元素。第一個(gè)子元素是img標(biāo)簽，用來(lái)展示圖片。第二個(gè)子元素是一個(gè)div標(biāo)簽，用來(lái)展示文本框。我們?cè)谶@個(gè)div標(biāo)簽中添加一個(gè)類(lèi)名“text”，以便可以在CSS中單獨(dú)設(shè)置文本框的樣式。

接著，在CSS中設(shè)置“image-with-text”類(lèi)的position屬性為relative，這樣我們才能為文本框設(shè)置絕對(duì)定位。然后，我們?yōu)椤皌ext”類(lèi)設(shè)置position屬性為absolute，bottom和left屬性為0，這樣就可以將文本框放置在圖片底部左側(cè)。

最后，我們對(duì)“text”類(lèi)設(shè)置樣式，如設(shè)置background-color（背景色），color（字體顏色），padding（內(nèi)邊距）等。你可以根據(jù)自己的需求進(jìn)行樣式設(shè)置。

通過(guò)這種方式，我們就可以在不影響圖片展示的情況下，在圖片上方添加一個(gè)美觀的文本框。這個(gè)效果可以用于很多地方，比如在網(wǎng)頁(yè)中展示產(chǎn)品介紹、圖片描述等。