圖片是網(wǎng)頁設(shè)計(jì)中必不可少的元素，而如何給圖片添加文字描述也是一個(gè)十分重要的問題。在這種情況下，CSS提供了一種方法——通過在圖片上疊加文字來描述圖片內(nèi)容。 使用CSS給圖片加字的基本方法是，首先將圖片和文字放在同一個(gè)DIV容器中，然后利用CSS中的絕對(duì)定位和z-index屬性將文字放在圖片上方。代碼如下：

<div class="img-container">
<img src="image.jpg">
<p class="img-desc">這是一張漂亮的圖片</p>
</div>
.img-container {
position: relative;
}
.img-desc {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
background-color: rgba(0,0,0,0.5);
color: #fff;
padding: 10px;
}

上面的代碼中，我們通過設(shè)置.img-container為相對(duì)定位，這樣.img-desc就可以相對(duì)于它進(jìn)行絕對(duì)定位了。同時(shí)，我們?cè)O(shè)置了.img-desc的bottom和left屬性，將其放在圖片的左下角。為了讓文字更加醒目，我們?cè)O(shè)置了一個(gè)黑色半透明的背景色，并將文字顏色設(shè)為白色。 當(dāng)然，上面的代碼只是一種最基本的方法，我們還可以進(jìn)一步美化文字樣式。例如，我們可以設(shè)置文字為白色，并添加陰影，以增強(qiáng)文字的立體感：

.img-desc {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
background-color: rgba(0,0,0,0.5);
color: #fff;
padding: 10px;
text-shadow: 1px 1px 1px #000;
}

上面的代碼中，我們添加了text-shadow屬性，這個(gè)屬性可以讓文字產(chǎn)生一個(gè)帶有陰影的立體效果。 除此之外，我們還可以通過CSS的transform屬性來讓文字進(jìn)行旋轉(zhuǎn)、縮放等變換：

.img-desc {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
background-color: rgba(0,0,0,0.5);
color: #fff;
padding: 10px;
transform: rotate(-10deg) scale(1.2);
}

上面的代碼中，我們使用了rotate和scale兩個(gè)變換函數(shù)，分別表示將文字旋轉(zhuǎn)-10度，并放大1.2倍。 綜上所述，借助CSS，我們可以很方便地對(duì)圖片加上文字說明，并且還可以對(duì)文字樣式進(jìn)行調(diào)整，使其更加醒目。不過，需要注意的是，過多的文字說明往往會(huì)影響用戶的體驗(yàn)，因此在設(shè)計(jì)網(wǎng)頁時(shí)要盡量精簡(jiǎn)說明文字，避免引起用戶疲勞。