CSS 是前端開發人員必備的技能之一，它可以實現眾多效果，如文字和圖片的交叉顯示，讓網頁更加生動有趣。

.container {
position: relative;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
text-align: center;
}
.image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
object-fit: cover;
}

首先，將容器的定位設置為相對定位，這樣即可使用絕對定位讓文字和圖片可以在同一個容器內共存。然后，將文字設為絕對定位，并設置 top 和 left 屬性為 50%。最后，使用 transform 屬性讓文字居中顯示。

圖片同樣需要絕對定位，并且設置寬度和高度為 100%，這樣可以保證圖片充滿整個容器。z-index 設置為 -1，這樣可以將圖片置于文字下方。object-fit 屬性可以在圖片比容器小的時候保持寬高比并填充整個容器。

在 HTML 文件中，將文字和圖片放置在同一個容器內，并為容器設置類名。

<div class="container">
<img src="example.jpg" alt="" class="image">
<div class="text">
<p>此處放置文字</p>
</div>
</div>

最后，應用剛剛寫好的 CSS 樣式即可。

實現圖片交叉顯示文字，可以讓網站更加生動有趣，引起用戶的注意，提高用戶體驗。上述示例只是其中之一，開發人員可以根據實際情況進行修改和優化。