眾所周知，CSS 可以為我們的網(wǎng)頁(yè)添加各種各樣的樣式。當(dāng)然，其中之一就是添加圖片蒙層。這種效果能夠讓我們的網(wǎng)頁(yè)看起來更加美觀和專業(yè)。下面讓我們來看一看如何使用 CSS 給圖片添加蒙層。 首先，我們需要使用 HTML 添加一個(gè)圖片元素。以下是一個(gè)簡(jiǎn)單的例子：

<img src="example.jpg" alt="example">

要添加蒙層，我們需要在該圖片上疊加一個(gè)半透明的層來實(shí)現(xiàn)。我們可以使用下面的 CSS 代碼來實(shí)現(xiàn)該效果：

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

注意，我們使用了CSS 偽元素 `::before`。這個(gè)元素能夠讓我們?cè)趫D片元素之前插入一個(gè)新的元素。我們?yōu)?`::before` 設(shè)置了絕對(duì)定位并且將其完全展開以覆蓋整個(gè)圖片。同時(shí)，我們使用了 `background-color` 屬性來設(shè)置這個(gè)層的顏色以及 `opacity` 屬性來設(shè)置不透明度。 接下來，讓我們將這個(gè)蒙層的層級(jí)設(shè)置為比圖片更高，這樣圖片就會(huì)位于層的下方。我們可以使用 `z-index` 屬性完成這個(gè)操作。如上面的代碼所示，我們只需要設(shè)置這個(gè)蒙層的 `z-index` 值為 1 即可。 綜上所述，使用 CSS 添加圖片蒙層只需要添加一些簡(jiǎn)單的代碼就能實(shí)現(xiàn)。當(dāng)然，我們還可以通過調(diào)整顏色、不透明度和圖層的順序來定制我們的效果。有了這些，在你的網(wǎng)站上添加蒙層將不會(huì)再是一件讓你感到困難的事情了。