CSS 可以讓我們輕松地在圖片上疊加文字。接下來，我們將通過以下步驟來實現這個效果：

1. 在 HTML 中插入要添加文字的圖片
2. 在 CSS 中創建類來定義圖片和文字的樣式
3. 在 HTML 中添加類，將樣式應用于圖片和文字

首先，使用以下代碼在 HTML 中插入圖片：

<div class="img-container">
<img src="image.jpg" alt="image">
<p class="caption">這里是圖片說明文字</p>
</div>

這將創建一個包含圖片和說明文字的 div。 接下來，我們需要在 CSS 中為其創建樣式：

.img-container {
position: relative;
text-align: center;
}
.caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 2rem;
text-shadow: 2px 2px 4px black;
}

這里，我們將父級容器（即 div）設置為相對定位，并將文字（即 caption 類）設置為絕對定位。我們使用了 transform 屬性來將文字向中心移動了一半的寬度和高度。此外，我們還添加了一些樣式，在文字周圍添加了陰影，以便更好地突出顯示。 現在，我們只需要將創建的類應用到 HTML 中，以使其生效。我們可以這樣實現：

<div class="img-container">
<img src="image.jpg" alt="image">
<p class="caption">這里是圖片說明文字</p>
</div>

現在，您已經成功地將文字添加到圖片上了！ 通過 CSS，您可以輕松地在任何圖片上添加自定義的文字。 這種效果很適合用于博客、網站banner、宣傳海報等，使圖片更有吸引力。