CSS是前端開(kāi)發(fā)中不可或缺的工具之一，除了可以實(shí)現(xiàn)各種布局效果外，還可以通過(guò)其強(qiáng)大的樣式控制功能，實(shí)現(xiàn)圖片覆蓋文字的效果。

首先，我們需要在HTML頁(yè)面中插入一張圖片和一段文本：

<div class="container">
<img src="picture.jpg" alt="圖片">
<p>這是一段文字</p>
</div>

接下來(lái)，我們需要使用CSS樣式控制，將圖片與文字進(jìn)行覆蓋。代碼如下：

.container {
position: relative; /*設(shè)置容器為相對(duì)定位*/
width: 500px;
height: 300px;
}
img {
position: absolute; /*設(shè)置圖片為絕對(duì)定位*/
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.5; /*設(shè)置圖片的透明度*/
}
p {
position: absolute; /*設(shè)置文字為絕對(duì)定位*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /*居中顯示*/
font-size: 24px;
color: #fff;
}

通過(guò)設(shè)置容器的position為relative，圖片的position為absolute，可以讓圖片與文字實(shí)現(xiàn)相對(duì)效果，從而覆蓋在一起。此外，通過(guò)opacity屬性可以設(shè)置圖片的透明度，從而讓文字更加清晰可見(jiàn)。

最終的效果如下：

這是一段文字

需要注意的是，圖片和文字的父元素容器需要設(shè)置合適的width和height屬性，否則可能會(huì)導(dǎo)致圖片和文字顯示不全。