在網頁設計中，經常需要在圖片上面添加文字。這種需求可以通過CSS來實現。下面我們就來詳細介紹一下如何在圖片上面寫字。 首先，我們需要在HTML代碼中添加一張圖片，并在其上方添加一個p標簽來放置文字。代碼如下： ```

<div class="img-container">
<img src="image.jpg" alt="圖片">
<p>這是一段文字</p>
</div>

其中，img-container是一個自定義的類名，用來設置圖片及文字的樣式。 接下來，我們需要對CSS進行一些設置。首先，我們需要讓圖片和文字都位于同一個容器內，并使其相對定位。代碼如下： ```

.img-container {
position: relative;
}
.img-container img {
display: block;
position: relative;
}
.img-container p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

上面的代碼實現了以下功能： - img的display設置為block，使圖片可以占據整個容器的寬度； - img和p都設置了相對定位，使它們相對于容器進行定位； - p元素設置了絕對定位，并且使用了top、left、transform屬性來將文字居中放置于圖片上方。 最后，我們可以對文字的顏色、字體大小、行高等樣式進行設置，以達到更好的視覺效果。代碼如下： ```

.img-container p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 20px;
line-height: 1.5;
}

通過上面的設置，我們可以在圖片上方輕松添加文字，并將其居中顯示。這樣不僅能夠豐富頁面內容，還能夠吸引用戶的注意力，提高用戶體驗。