在網頁設計中，如何讓文字與圖片良好地結合起來是一個非常重要的問題。其中，一種常見的設計方案是讓圖片上方顯示相關的文字說明。那么該如何實現該效果呢？下面我們將介紹如何使用 CSS 將文字顯示在圖片下方。 首先，我們需要在 HTML 代碼中創建相應的結構。通常情況下，我們會將圖像和文本包含在一個容器中，然后使用 CSS 設置相應的樣式。以下是一個示例的 HTML 代碼：

<div class="container">
<img src="example.jpg" alt="示例圖像">
<p class="caption">這是一張示例圖片</p>
</div>

在上述代碼中，我們使用一個 div 元素作為容器，包含了一個 img 元素和一個 p 元素。img 元素用于顯示圖片，p 元素用于顯示圖片的說明文字，兩者使用了相應的 class 屬性。 接下來，我們需要使用 CSS 為該結構設置樣式，使得文字能夠正確地顯示在圖片下方。具體實現的方法是使用絕對定位（absolute positioning）和 z-index 屬性。

.container {
position: relative;
}
.container img {
display: block;
margin: 0 auto;
}
.container .caption {
position: absolute;
text-align: center;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
font-size: 14px;
z-index: 1;
}

在上述代碼中，我們給容器（.container）設置了 position: relative 屬性，使得其中的子元素可以使用絕對定位，相對于該容器。同時，我們對 img 元素設置了 display: block 和 margin: 0 auto，將圖片水平居中顯示。 最重要的是我們對 .caption 元素設置了絕對定位，并將其放置于圖片底部。通過設置 bottom: 0，left: 0 和 right: 0，我們保證了該元素占滿整個容器的底部，并且可以自適應容器的寬度。為了讓文字更加清晰，我們使用了一個半透明的背景色，并將文字顏色設置為白色。最后，通過設置 z-index: 1，我們使得 .caption 元素處于容器的最上層，從而覆蓋在圖片之上。 以上就是讓文字顯示在圖片下方的一種實現方式。當然，在實際的設計中，還有各種各樣的具體情況需要考慮，但是以上的方法可以作為基礎來實現這一效果。