在网页设计中，图片是一个非常重要的组成部分，而蒙照效果是让图片更具美感的一种方法。今天我们来学习如何使用 CSS 给图片设置蒙照效果。

img {
position: relative;
border-radius: 5px;
}
img:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 5px;
}

上面的代码中，我们首先为图片设置了一个圆角边框，然后使用了 CSS 伪元素 :after 来添加一个半透明的蒙照层，使图片看起来更柔和。在 :after 中，我们设置了content: ""来让伪元素显示出来，将其position属性设置为absolute，让其可以叠加在图片之上，然后将其background-color设置为一个半透明黑色，使用border-radius属性使其与图片的圆角边框保持一致。

如果你想要让图片的蒙照效果更加明显，可以调整背景色的透明度，比如将rgba(0, 0, 0, 0.3)中的最后一个参数从 0.3 调整到 0.5。

我们也可以为:after伪元素设置其他样式，比如opacity属性来控制其透明度，或者添加text-align: center属性来居中蒙照层的文本。

通过使用 CSS 给图片添加蒙照效果，我们可以大大提升网页的美观度和整体质感。希望本文对你有所帮助！