在網頁設計中，圖片與文字通常是不可或缺的元素。我們可以通過CSS來實現在圖片上或圖片下方顯示文字的效果。本文將介紹兩種實現方法。

方法一：

首先，我們需要在HTML中添加一個帶有圖片的元素，例如標簽。然后，我們可以使用CSS的position屬性和z-index屬性來控制文字的位置和疊放順序。以下是具體的示例代碼：

<div class="img-container"><img src="example.jpg" alt="Example Image"><p class="img-text">這是一段圖片下方顯示的文字。</p></div>

.img-container {
position: relative;
}
.img-text {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}

如上所述，我們使用了position: relative來指定包含圖片的元素的相對定位，使得.img-text可以根據其位置進行絕對定位。然后，我們指定了img-text的位置（例如，bottom：0讓文字與圖片底部對齊），并將其z-index屬性設置為1（即使文字在圖片上）。

方法二：

除了在圖片下方顯示文字，我們也可以在圖片上方實現該效果。這種方法涉及到CSS的mix-blend-mode屬性，該屬性允許情況混合顯示。以下是具體的示例代碼：

<div class="img-container"><img src="example.jpg" alt="Example Image"><p class="img-text">這是一段圖片上方顯示的文字。</p></div>

.img-container {
position: relative;
}
.img-text {
position: absolute;
top: 0;
left: 0;
mix-blend-mode: difference;
z-index: 1;
}

如上所述， .img-text絕對定位且與圖片元素重疊，并使用mix-blend-mode屬性將文字混合到圖片中。該屬性的值difference可以生成顏色反相的效果，使得文字更加強烈顯眼。最后，我們將.img-text的z-index屬性設置為1，以確保文字總是在圖片上方。

總之，使用CSS可以輕松實現在圖片上或下方顯示文字的效果。我們只需了解每個方法的具體使用方式并善加利用即可，以創造出更加豐富多彩的網頁。