今天我們來講一下CSS圖片文字遮蓋效果，這種效果通常可以用在網(wǎng)站的Banner或者頁面介紹模塊上。下面我們來看一種實(shí)現(xiàn)方法： 首先，我們需要定義一個(gè)容器div，里面包括一個(gè)圖片img和一段文字p。代碼如下：

<div class="wrapper">
<img src="example.jpg" alt="example">
<p>這是一段例子文字</p>
</div>

然后，我們用CSS將圖片和文字都定位在容器的左上角，并設(shè)置圖片的寬度為100%：

.wrapper {
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
p {
position: absolute;
top: 0;
left: 0;
margin: 20px;
}

接下來，我們需要給容器div定義一個(gè):before偽元素，用來創(chuàng)建遮蓋層。再加上一個(gè)與p標(biāo)簽相同的樣式，讓遮蓋層的文字與p標(biāo)簽的文字重疊在一起：

.wrapper:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.wrapper p {
position: relative;
z-index: 1;
color: #fff;
}

其中，background-color是遮蓋層的背景顏色，這里我們?cè)O(shè)置了一個(gè)半透明的黑色。z-index是用于設(shè)置層次關(guān)系的，這里我們把p標(biāo)簽的z-index設(shè)置為1，這樣p標(biāo)簽就在遮蓋層之上了。 這樣就完成了一個(gè)簡單的CSS圖片文字遮蓋效果。如果你還想讓這個(gè)效果更加炫酷，可以嘗試加入一些CSS3動(dòng)畫效果或者變換效果。