在網(wǎng)頁(yè)設(shè)計(jì)中，我們經(jīng)常需要在圖片上疊加文字，以達(dá)到更好的頁(yè)面效果。CSS字浮在圖片上依靠的是CSS屬性position和z-index，下面我們來(lái)詳細(xì)了解一下使用方法。

首先，在HTML文檔中添加一張圖片和想要疊加的文字。

<div class="image">
<img src="example.jpg" alt="示例圖片">
<p class="text">這是一段文字</p>
</div>

我們將圖片和文字放在一個(gè)div容器內(nèi)，圖片通過(guò)img標(biāo)簽實(shí)現(xiàn)，文字通過(guò)p標(biāo)簽實(shí)現(xiàn)。接下來(lái)，在CSS文件中添加樣式。

.image {
position: relative;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}

首先設(shè)置容器div的position屬性為relative，使文字的position屬性可以相對(duì)于它定位。接著，設(shè)置文字的position屬性為absolute，將它從文檔流中脫離出來(lái)，然后通過(guò)top和left屬性使其居中對(duì)齊，transform: translate(-50%, -50%)是為了修正文字位置。最后，設(shè)置文字的z-index屬性，將它置于圖片上方。

通過(guò)以上樣式設(shè)置，我們就可以實(shí)現(xiàn)在圖片上疊加文字的效果了。