在前端開發(fā)中，圖文并茂的網頁設計越來越受到人們的青睞。而在設計中，我們常常需要在圖片或者圖標上加上文字介紹或者標識。這時候，CSS就非常好用了。

首先，我們需要一個基礎的HTML結構：

<div class="container">
<img src="image.jpg" class="icon">
<p class="description">這里是文字描述</p>
</div>

其中，圖片使用了img標簽，文字使用了p標簽。這里我們給圖片添加了一個class名為“icon”，文字添加了一個class名為“description”。

接下來，我們使用CSS在圖片上添加文字：

.container {
position: relative;
}
.description {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0,0,0,0.5);
color: #fff;
padding: 10px;
}

我們首先給容器添加了一個相對定位的屬性。這是為了讓后面的絕對定位能夠基于容器進行定位。接下來，我們給文字添加了絕對定位，并設置了底部距離容器底部0px的位置。接著我們用了一些技巧和屬性，使文字能夠水平居中。最后，我們添加了一些樣式來美化文字。

如果您希望在圖片上添加多行文字，可以將p標簽換成div標簽，并給div添加一些高度。

希望這篇文章能夠幫助您在設計中更好地使用CSS技巧。更多的技巧可以在W3C的文檔或者各大網站的教程中學習。