在網頁設計中，疊加圖被廣泛應用于圖片展示和元素裝飾。如果我們想要在網頁中畫出一個疊加圖，可以通過CSS來實現。

.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屬性設置為relative。然后，給該元素下的圖片設置z-index值為1，以便使圖片顯示在疊加圖底層。接著，在該元素上設置偽元素::after，并將其寬度和高度設為100%。同時，利用線性漸變linear-gradient函數設置偽元素的背景為半透明黑色，并將z-index值設置為2，使偽元素在圖片上面。

以上CSS代碼就可以實現一個簡單的疊加圖效果。用戶可以根據自身需求進行修改，比如改變偽元素的顏色、設置多個疊加層等。