CSS是網頁設計中的重要組成部分，它可以控制網頁元素的樣式。其中，文本和圖片的排布是設計中的重點之一，今天我們來看看如何使用CSS將文本放置在圖片上層。

<div class="image-with-text">
<img src="example.jpg" alt="example">
<p class="text">這是一段文本</p>
</div>

首先，我們需要在HTML中將圖片和文本放在同一個div中，并設置正確的class名稱。

.image-with-text {
position: relative;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
/* 其他樣式 */
}

接下來，在CSS中我們將使用position屬性來控制文本的位置，同時注意到要為外層div設置position: relative，這樣才能實現子元素相對定位。在文本的class中加入position: absolute，表示我們要將該元素絕對定位。接著，top和left屬性用來控制文本的位置，此處設置為居中對齊。

最后，我們可以為文本和圖片設置其他樣式，以達到設計效果。

通過上述方法，我們就能夠輕松實現文本在圖片上層的排布效果，提升網頁的美觀程度。