在網(wǎng)頁開發(fā)中，經(jīng)常需要在圖片中添加文字來進(jìn)行說明或描述。通過 CSS，我們可以輕松地設(shè)置圖片中的文字樣式及位置。

首先，我們需要在 HTML 中插入一張圖片和文字，如下所示：

<div>
<img src="image.jpg" alt="圖片" width="300" height="200">
<p>這是圖片的描述文字</p>
</div>

接下來，我們使用 CSS 來設(shè)置圖片中文字的樣式和位置。其中，我們需要使用position屬性來設(shè)置文字的絕對定位，并且還需要設(shè)置z-index屬性來保證文字在圖片之上。

<style>
div { position: relative; }
img { display: block; }
p {
position: absolute;
top: 30px;
left: 50px;
z-index: 1;
color: #fff;
background-color: rgba(0, 0, 0, 0.6);
padding: 10px;
border-radius: 5px;
font-size: 18px;
font-weight: bold;
}
</style>

上述代碼中，我們先將div設(shè)置為相對定位，以便使其成為子元素的定位基準(zhǔn)。然后，我們將img的樣式設(shè)置為塊級元素，以便設(shè)置其寬度和高度。隨后，我們使用position: absolute;將p元素的定位方式設(shè)置為絕對定位，并且使用top和left屬性來控制其位置。接下來，我們設(shè)置了z-index: 1;來使文字在圖片之上，并且設(shè)置了文字的背景顏色、字體樣式等。

通過上述代碼的設(shè)置，我們可以輕松地在圖片中添加文字，并且可以隨意地控制其樣式和位置。