在網頁設計中，圖片除了作為裝飾元素之外，還可以被用來傳遞信息。而在一些情況下，需要為圖片增加一些文字描述，以便更好地傳達信息。下面介紹如何使用CSS為圖片添加文字。 首先，在HTML代碼中將圖片和文字嵌套在一起。這可以通過將圖片放置在一個容器元素中，并用一個p標簽包含圖片下的文字來實現。代碼如下：

<div class="container">
<img src="image.jpg" alt="image">
<p class="image-caption">這里是圖片的描述文字。</p>
</div>

接下來，我們需要使用CSS為圖片的描述文字添加樣式。我們可以通過給p標簽應用樣式來實現。代碼如下：

.image-caption {
font-size: 14px;
text-align: center;
margin-top: 10px;
}

在樣式中，我們使用了font-size屬性來控制文字的大小。使用text-align屬性來讓文字居中。margin-top屬性用于設置文字與圖片之間的距離。 最后，為了讓文字和圖片更好的對齊，我們需要為容器元素也添加一些樣式。代碼如下：

.container {
display: inline-block;
position: relative;
}
.container img {
vertical-align: middle;
}
.container .image-caption {
display: block;
position: absolute;
bottom: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 5px;
}

在樣式中，我們使用了position屬性來使得容器元素相對定位。同時使用了display屬性，讓容器元素可以作為內聯塊級元素。我們還通過為p標簽添加padding屬性，給文字增加了一些內邊距。最后，我們使用了rgba()屬性為p標簽添加一個半透明的背景顏色，使文字更為清晰。 在這里需要注意的是，當我們在給圖片添加描述文字時，一定要確保文字的樣式和圖片的樣式相對應。同時，我們也要注意控制文字和圖片之間的間距，以便達到更好的視覺效果。