CSS可以給圖片添加蒙版，讓圖片看起來更加美觀、獨(dú)特。下面介紹一下如何給圖片添加蒙版。

首先，需要確保圖片已經(jīng)被添加到HTML文件中?？梢酝ㄟ^img標(biāo)簽添加圖片。

在CSS中，可以使用background-image屬性來添加圖片。利用:before偽元素，可以向圖片添加蒙版。

.image-container {
position: relative;
}
.image-container:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
url(image.jpg);
z-index: 1;
}

這里，.image-container是圖片的父元素，利用position:relative可以讓偽元素相對(duì)于父元素進(jìn)行定位。

通過:before偽元素，添加了一個(gè)漸變蒙版和一張圖片為背景圖片。linear-gradient可以添加漸變效果，rgba表示Red、Green、Blue以及Alpha的縮寫。有兩個(gè)rgba參數(shù)，第一個(gè)參數(shù)表示蒙版的起始透明度，第二個(gè)參數(shù)表示蒙版的結(jié)束透明度。

最后，z-index屬性用于防止蒙版遮擋圖片。

通過這些簡單的CSS代碼，就可以給圖片添加蒙版。這樣，你的圖片可以得到更多的關(guān)注，吸引更多的眼球。