CSS（層疊樣式表）是一種用來美化網頁的編程語言，它可以控制網頁中元素的樣式、布局以及動畫效果。其中一種常見的用法就是將文字顯示在圖片上方，這樣可以讓頁面更加美觀、易讀。下面我們就來講一下如何使用CSS在圖片上方顯示文字。

//HTML代碼
<div class="img-container">
<img src="/img/image.jpg" alt="美麗的風景">
<p>這是圖片上的文字</p>
</div>
//CSS代碼
.img-container {
position: relative; /* 設置元素定位為相對定位 */
}
.img-container img {
display: block; /* 圖片設置為塊級元素 */
width: 100%; /* 圖片寬度占滿父元素 */
height: auto; /* 圖片高度自適應 */
}
.img-container p {
position: absolute; /* 設置元素定位為絕對定位 */
top: 50%; /* 文字距離圖片頂部50%位置 */
left: 50%; /* 文字距離圖片左側50%位置 */
transform: translate(-50%, -50%); /* 將文字居中 */
font-size: 24px; /* 文字大小 */
color: #fff; /* 文字顏色為白色 */
text-shadow: 1px 1px 2px #000; /* 設置文字陰影效果 */
z-index: 1; /* 設置文字在圖片上方顯示 */
}

以上代碼中，我們首先將容器元素設置為相對定位，然后在其中嵌入一個圖片和一個p標簽。接著，我們將圖片設置為塊級元素，使其占據整個父元素的寬度，并讓高度自適應。然后，我們設置p標簽為絕對定位，將其位置設為距離頂部50%、左側50%的位置，再通過transform屬性將其居中。最后，我們為p標簽設置了一些文字樣式，如顏色、陰影、大小等，并將其z-index屬性設置為1，使其在圖片上方顯示。

使用CSS將文字顯示在圖片上方，不僅可以讓網頁更加美觀、引人注目，而且能夠提高網頁的可讀性和用戶體驗。希望大家在開發網頁的過程中能夠善于運用這個技巧，打造出更加出色的效果。