在前端开发中，经常会遇到需要对图片进行美化的情况。其中，一种常见的需求就是需要将图片加上蒙版效果。通过使用CSS，我们可以方便地实现这种效果。

以下是实现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;
}

在上面的代码中，我们首先创建一个DIV容器，内部包含一个IMG标签和一个空DIV元素。我们将IMG标签设置了一个较高的z-index，使其位于DIV容器的上层。同时，我们设置蒙版的DIV元素position为absolute，使其与IMG标签重叠。我们还可以根据需要调整蒙版的颜色和透明度。通过这种方式，我们就创建了一个图片蒙版效果。

在实际开发中，我们可以将其应用到产品展示、图片墙等场景中，以达到美化效果的同时，提升用户体验。