CSS是前端開發中常用的樣式語言，可以讓網頁變得更加美觀和易于閱讀。其中有一種常見的需求：在圖片上添加文字。這種需求在設計網站頁面時非常常見，例如添加產品名稱、廣告語等。

.img-with-text {
position: relative;
}
.img-with-text img {
display: block;
}
.img-with-text .text {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 10px;
font-size: 14px;
text-align: center;
}

上述代碼為給圖片添加文字的CSS樣式，可以通過添加`.img-with-text`類名來給圖片添加文字。需要注意的是，由于需要設置文字的位置，因此父元素要設置為`position: relative`。

圖片和文字通過設置`position: absolute`和`bottom: 0`來使文字出現在圖片底部。同時，我們可以設置背景為半透明的黑色，用白色字體讓文字更加突出。

在HTML中使用該樣式就非常簡單了：

<div class="img-with-text">
<img src="image.jpg" alt="Image">
<div class="text">這里是文字</div>
</div>

通過將文字嵌套在`img-with-text`中，我們就可以添加圖片上的文字了。

總體來說，通過這種方式添加文字可以使網頁更加豐富和有趣。通過CSS的樣式可以讓文字和圖片更加協調，從而提高網頁的美觀度和用戶體驗。