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 样式即可。

实现图片交叉显示文字，可以让网站更加生动有趣，引起用户的注意，提高用户体验。上述示例只是其中之一，开发人员可以根据实际情况进行修改和优化。