CSS中有一個實用的技巧，可以讓文字在圖片上響應，增加頁面的視覺效果。下面我們來了解一下怎樣實現。

<div class="img-container">
<img src="my-image.jpg" alt="My Image">
<h2 class="overlay-text">這是一段文字</h2>
</div>
.img-container {
position: relative;
}
.overlay-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: white;
text-shadow: 1px 1px 2px black;
}

首先，我們需要一個包含圖片和文字的div，以及一張圖片。在這個div中，我們還需要一個h2標簽，作為文字覆蓋在圖片上。

接下來，在CSS中，我們將img-container類設置為相對定位，以確保h2標簽可以相對于其進行絕對定位。我們還將overlay-text類設置為絕對定位，將它放置在圖片的中央，通過transform屬性來完成這一效果。

然后，我們對overlay-text類進行樣式設置。我們設置了字體大小、顏色和文本陰影，以盡可能地提高文本的可讀性。

當我們在瀏覽器中查看頁面時，文字將覆蓋在圖片的中央，位置隨著瀏覽器窗口的大小而改變。這是一種很棒的方式，可以讓你妥善利用圖片上的空白區域，并為用戶提供更好的可視體驗。