CSS背景圖加漸變蒙版是一種非常常見的頁面美化方式，它可以讓網頁在視覺上更加有吸引力，許多網站都采用了這種方式來增強頁面的美感。下面我們就來介紹一下如何實現CSS背景圖加漸變蒙版。

首先，我們需要準備一張需要添加背景漸變蒙版的圖片，比如以下這張圖片：

/* CSS代碼 */
.img-container {
background-image: url('example.jpg');
background-size: cover;
position: relative;
}
.img-container::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.8));
pointer-events: none;
}

上面的代碼中，我們使用了偽元素選擇器::before來創建一個在圖片上方的漸變層，從而實現了背景圖加漸變蒙版。接下來我們解釋一下代碼的具體實現過程：

/* CSS代碼 */
.img-container {
/* 設置背景圖片 */
background-image: url('example.jpg');
/* 背景圖片自適應 */
background-size: cover;
/* 相對位置 */
position: relative;
}
.img-container::before {
/* 漸變層的內容 */
content: "";
/* 絕對定位，覆蓋在圖片之上 */
position: absolute;
/* 漸變層的上下左右都與圖片相同 */
top: 0;
right: 0;
bottom: 0;
left: 0;
/* 漸變層的漸變顏色 */
background: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.8));
/* 不響應用戶事件，保證點擊事件穿透到下方的圖片 */
pointer-events: none;
}

通過上面的代碼，我們就可以實現CSS背景圖加漸變蒙版了。如果需要調整漸變層的顏色或者位置，只需要修改相關的CSS屬性即可。