在網(wǎng)頁設(shè)計(jì)中，疊加圖被廣泛應(yīng)用于圖片展示和元素裝飾。如果我們想要在網(wǎng)頁中畫出一個(gè)疊加圖，可以通過CSS來實(shí)現(xiàn)。

.overlay {
position: relative;
}
.overlay img {
z-index: 1;
}
.overlay::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
z-index: 2;
}

首先，我們需要將要加上疊加效果的元素的position屬性設(shè)置為relative。然后，給該元素下的圖片設(shè)置z-index值為1，以便使圖片顯示在疊加圖底層。接著，在該元素上設(shè)置偽元素::after，并將其寬度和高度設(shè)為100%。同時(shí)，利用線性漸變linear-gradient函數(shù)設(shè)置偽元素的背景為半透明黑色，并將z-index值設(shè)置為2，使偽元素在圖片上面。

以上CSS代碼就可以實(shí)現(xiàn)一個(gè)簡單的疊加圖效果。用戶可以根據(jù)自身需求進(jìn)行修改，比如改變偽元素的顏色、設(shè)置多個(gè)疊加層等。