最近想在網(wǎng)站上添加一些圖片，并且在圖片上添加一些文字說明，于是就將目光投向了CSS。 首先，我們需要將圖片和文字都放在一個(gè)容器中，這個(gè)容器可以是一個(gè)div標(biāo)簽，例如：

<div class="img-container">
<img src="picture.jpg" alt="My Picture">
<p>This is my picture.</p>
</div>

接下來，我們可以使用CSS對(duì)這個(gè)容器進(jìn)行樣式設(shè)置。首先，我們需要設(shè)置這個(gè)容器可以容納圖片和文字，使用display: inline-block即可：

.img-container {
display: inline-block;
}

然后，我們需要將文字放在圖片上面，可以使用position: absolute，加上top和left屬性來定位文字位置，并且使用z-index屬性將文字放在圖片上層：

.img-container {
position: relative;
display: inline-block;
}
.img-container p {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

最后，我們還可以添加一些額外樣式，例如為圖片添加背景顏色、為文字添加透明度等等，具體看需要。 總結(jié)一下，讓圖片上有文字的CSS實(shí)現(xiàn)可以分為以下幾個(gè)步驟： 1. 創(chuàng)建一個(gè)包含圖片和文字的容器（通常使用div標(biāo)簽）。 2. 將容器設(shè)置為inline-block。 3. 設(shè)定容器的position為relative，文字的position為absolute，設(shè)置文字的top、left、z-index屬性。 4. (可選)添加額外的樣式效果。 希望這篇文章對(duì)你有所幫助，如果有疑問或者其他想法歡迎留言討論！