CSS給圖片加遮罩，是一種常用的美化圖像的方式。下面我們將介紹如何通過 CSS 實(shí)現(xiàn)圖片遮罩的效果。 首先，我們需要為圖片添加一個(gè)容器元素，比如 div 或者 figure，并設(shè)置其寬高，以及 position 屬性為 relative。然后，將圖片的寬高設(shè)置為 100% 并設(shè)置其 position 為 absolute。這樣圖片就能夠相對于容器元素進(jìn)行定位。 接著，我們可以使用 CSS3 的偽元素 ::after 或者 ::before，來添加遮罩層。如下面的代碼所示：

div {
position: relative; //容器元素相對定位
width: 300px;
height: 200px;
}
div img {
width: 100%; //圖片寬度和容器元素相等
position: absolute; //圖片絕對定位
top: 0; //定位到容器元素頂部
left: 0; //定位到容器元素左側(cè)
}
div::before {
content: ''; //設(shè)置偽元素內(nèi)容為空
position: absolute; //偽元素絕對定位
top: 0; //定位到容器元素頂部
left: 0; //定位到容器元素左側(cè)
width: 100%; //偽元素寬度和容器元素相等
height: 100%; //偽元素高度和容器元素相等
background: rgba(0, 0, 0, 0.5); //背景顏色為半透明黑色
}

上面的代碼中，我們給容器元素添加了一個(gè)偽元素 ::before，并設(shè)置其背景顏色為半透明黑色。這樣就能夠在圖片上添加一層遮罩，從而保證圖片的內(nèi)容仍然能夠清晰地顯示出來。 當(dāng)然，我們還可以使用其他樣式屬性，比如 border-radius、box-shadow、text-shadow 等，來進(jìn)一步美化遮罩層或圖片，以達(dá)到更好的效果。 總之，CSS 給圖片加遮罩是一種簡單而實(shí)用的方法，能夠?yàn)閳D片添加一些特殊的效果，更加吸引人的注意力。希望本文能夠?qū)Υ蠹矣兴鶐椭?/div>