CSS 是一種非常強(qiáng)大的樣式表語(yǔ)言，它可以做到許多令人驚嘆的效果。其中一種常見(jiàn)的效果就是在圖片上面放置文字。下面我們來(lái)看一下這個(gè)效果的實(shí)現(xiàn)。

HTML 代碼:
<div class="image-caption">
<img src="path/to/image.jpg" alt="Image" />
<p>這里是圖片的描述文字。</p>
</div>
CSS 代碼:
.image-caption {
position: relative; /* 設(shè)為相對(duì)定位 */
display: inline-block; /* 設(shè)為行內(nèi)塊級(jí)元素 */
}
.image-caption img {
display: block; /* 設(shè)為塊級(jí)元素，以便于進(jìn)行絕對(duì)定位 */
}
.image-caption p {
position: absolute; /* 設(shè)為絕對(duì)定位 */
bottom: 0; /* 指定距離底部的距離 */
left: 0; /* 指定距離左側(cè)的距離 */
right: 0; /* 指定距離右側(cè)的距離 */
padding: 10px; /* 為文字添加一些內(nèi)邊距 */
background-color: rgba(0, 0, 0, 0.5); /* 設(shè)為半透明的黑色背景 */
color: #fff; /* 設(shè)置文字顏色為白色 */
font-size: 16px; /* 設(shè)定文字的大小 */
line-height: 1.2; /* 設(shè)置行高 */
}

以上代碼中，我們首先在 HTML 中創(chuàng)建了一個(gè)包裹圖片和文字的 div 元素，并在其中添加了一張圖片和一段文字描述。然后，在CSS中，我們將這個(gè) div 元素設(shè)為相對(duì)定位，并設(shè)為行內(nèi)塊級(jí)元素。這樣做的目的是為它的子元素——圖片和文字，提供一個(gè)父級(jí)容器，從而便于進(jìn)行定位。

接下來(lái)，我們對(duì)圖片進(jìn)行了一些樣式的設(shè)定，將其設(shè)為塊級(jí)元素，以便于進(jìn)行絕對(duì)定位。然后，在文字的樣式中，我們將其設(shè)為絕對(duì)定位，并指定了它距離底部、左側(cè)和右側(cè)的距離。同時(shí)，我們?yōu)槲淖痔砑恿艘恍﹥?nèi)邊距，并將它的背景設(shè)置為半透明的黑色，以便于讓文字更加突出。最后，我們?cè)O(shè)定了文字的大小、行高和顏色。

這樣，我們就實(shí)現(xiàn)了在圖片上方放置文字的效果。你可以根據(jù)需要自己調(diào)整文字的位置、背景色等樣式，來(lái)讓這個(gè)效果更加適合你的需求。