在網(wǎng)站設(shè)計(jì)中，經(jīng)常需要在圖片上添加文字來進(jìn)行說明或者裝飾，這時(shí)候就需要用到CSS的技巧。

最基本的方法是直接在圖片下面添加文字，但這會占據(jù)頁面空間，顯得不夠美觀。因此，我們可以使用CSS的定位技巧在圖片上添加文字。

/*HTML代碼*/
<div class="img-container">
<img src="example.jpg" alt="example">
<span class="img-text">圖片說明</span>
</div>
/*CSS代碼*/
.img-container{
position: relative;
}
.img-text{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0,0,0,0.5);
color: #fff;
text-align: center;
}

上述代碼中，我們首先將圖片的父容器設(shè)置為相對定位，這樣子元素就可以使用絕對定位技巧設(shè)置位置。然后，我們給文字容器設(shè)置絕對定位，讓它覆蓋在圖片上面。

為了讓文字容器顯示在圖片下方，我們需要設(shè)置bottom屬性為0，也就是距離父容器底部為0。為了讓文字容器寬度與圖片一致，我們通過width屬性將它設(shè)置成100%。另外，我們設(shè)置了文字容器的背景色為半透明的黑色，讓文字更加清晰，也更突出。

上述代碼是最基本的圖片上面添加文字的方法，當(dāng)然還有很多更為復(fù)雜、炫酷的方法，需要根據(jù)具體情況進(jìn)行選擇。