在網(wǎng)頁設計中，給圖片添加文字常常能夠使得頁面更加美觀而且具有吸引力。實現(xiàn)這樣的效果，可以使用CSS將文字直接寫在圖片里面。

首先需要使用一張圖片，你可以添加一個元素到HTML中，并設置src屬性指向你的圖片的路徑。

<img src="my-image.jpg" alt="My Image">

接下來，你需要用CSS把文本寫在圖片上。你可以使用position屬性將文本定位在圖片上：

<div class="image-container">
<img src="my-image.jpg" alt="My Image">
<div class="text-overlay">
<p>這是我的圖片</p>
</div>
</div>
<style>
.image-container {
position: relative;
width: 100%;
}
.text-overlay {
position: absolute;
top: 0;
left: 0;
color: white;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
text-align: center;
}
p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>

在上面的代碼中，我們首先使用position: relative將父元素.image-container設為相對定位，以便于子元素使用絕對定位。我們隨后使用position: absolute和一個半透明黑色背景，將文本層.text-overlay定位于圖片上面。最后使用相對定位position: abolut和transform屬性以將文字水平垂直居中在文本層中。

現(xiàn)在我們就使用上面的這部分CSS，就能夠在你的網(wǎng)頁上添加一個美麗的、有吸引力的帶有文字的圖片了。