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

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

上面的代碼中，我們給容器元素添加了一個偽元素 ::before，并設置其背景顏色為半透明黑色。這樣就能夠在圖片上添加一層遮罩，從而保證圖片的內容仍然能夠清晰地顯示出來。 當然，我們還可以使用其他樣式屬性，比如 border-radius、box-shadow、text-shadow 等，來進一步美化遮罩層或圖片，以達到更好的效果。 總之，CSS 給圖片加遮罩是一種簡單而實用的方法，能夠為圖片添加一些特殊的效果，更加吸引人的注意力。希望本文能夠對大家有所幫助。