在前端開發(fā)中，經(jīng)常會遇到需要對圖片進行美化的情況。其中，一種常見的需求就是需要將圖片加上蒙版效果。通過使用CSS，我們可以方便地實現(xiàn)這種效果。

以下是實現(xiàn)CSS圖片加蒙版效果的示例代碼：

// HTML代碼
<div class="img-container">
<img src="example.jpg">
<div class="mask"></div>
</div>
// CSS代碼
.img-container {
position: relative;
max-width: 500px;
}
.mask {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 1;
}
img {
display: block;
max-width: 100%;
height: auto;
z-index: 2;
}

在上面的代碼中，我們首先創(chuàng)建一個DIV容器，內(nèi)部包含一個IMG標簽和一個空DIV元素。我們將IMG標簽設(shè)置了一個較高的z-index，使其位于DIV容器的上層。同時，我們設(shè)置蒙版的DIV元素position為absolute，使其與IMG標簽重疊。我們還可以根據(jù)需要調(diào)整蒙版的顏色和透明度。通過這種方式，我們就創(chuàng)建了一個圖片蒙版效果。

在實際開發(fā)中，我們可以將其應用到產(chǎn)品展示、圖片墻等場景中，以達到美化效果的同時，提升用戶體驗。