在許多網(wǎng)站上，我們常常會(huì)看到一些圖片以及文字的組合來實(shí)現(xiàn)更好的視覺效果。而要實(shí)現(xiàn)這個(gè)效果，就需要使用到CSS文字現(xiàn)在在圖片上層。

想要實(shí)現(xiàn)這個(gè)效果，我們需要使用CSS的z-index屬性，在HTML中，我們可以通過給圖片和文字分別添加兩個(gè)div，并通過CSS設(shè)置div的樣式，使得文字在圖片上面顯示。

<div class="img-container">
<img src="image.jpg">
</div>
<div class="text-container">
<p>這是要顯示在圖片上面的文字</p>
</div>

然后在CSS中，對(duì)于兩個(gè)div進(jìn)行樣式設(shè)置：

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

在這個(gè)例子中，我們給img-container添加了一個(gè)相對(duì)定位，并且z-index為1。而對(duì)于text-container，我們使用了絕對(duì)定位，并且將它放在圖片的中心位置，使用transform屬性來實(shí)現(xiàn)，同時(shí)設(shè)置z-index為2，這樣就可以使得文字顯示在圖片上面。

這樣就可以實(shí)現(xiàn)CSS文字現(xiàn)在在圖片上層的效果了。通過這樣的方式，可以讓網(wǎng)站的設(shè)計(jì)更加具有視覺沖擊力和吸引力。