CSS 可以轻松地在图片上添加半透明的黑色遮罩，帮助提高页面的可视性和风格。

/* CSS 代码*/
div {
position: relative;
width: 400px; /*图片宽度*/
}
div::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.5; /*半透明度*/
background-color: black; /*背景颜色*/
}
img {
display: block;
width: 100%;
}

代码中的 div 元素包含了一张图片，使用了 ::before 伪元素生成了一个覆盖在图片上方的黑色半透明遮罩。

通过更改 ::before 伪元素的 opacity 属性可以调整遮罩的透明度。如果想要遮罩颜色不是黑色，可以更改 background-color 的值为其他颜色。

最后，为了使图片可以完整显示，需要将其宽度设置为 100%。