當(dāng)我們需要在網(wǎng)頁中顯示一張圖片和相關(guān)的文字時，常見的做法是將文字和圖片放在一起或者在圖片下方顯示文字。但是有時候我們希望將文字顯示在圖片的上方，這時候就需要使用CSS來實現(xiàn)。

.img-container {
position: relative;
display: inline-block;
}
.img-description {
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 16px;
padding: 10px;
box-sizing: border-box;
width: 100%;
text-align: center;
}

首先，我們需要將圖片和文字包裹在一個容器中，并將容器設(shè)為相對定位。這樣后面的絕對定位元素（即文字）可以相對于它定位。具體實現(xiàn)如下：

<div class="img-container">
<img src="image.jpg">
<div class="img-description">這是圖片的描述文字</div>
</div>

接下來，我們需要給文字添加絕對定位，并將它放置在容器的頂部（即top: 0）。我們還需要給文字添加背景色、字體顏色、字體大小、內(nèi)邊距和盒模型，讓文字看起來更加美觀。另外，為了讓文字水平居中，我們將其文本對齊方式設(shè)為居中（即text-align: center）。通過以上步驟，我們就可以實現(xiàn)在圖片上方顯示文字的效果啦。

需要注意的是，顯示在圖片上方的文字可能會擋住圖片。所以如果想要避免這種情況，可以適當(dāng)調(diào)整文字的透明度或者為圖片添加一些透明的遮罩。