css 实现蒙版效果
如图所示，我们需要将左边的图片展示为右边的图片效果，即为图片添加一层蒙版。
一个div同时设置background-color和background-image的话，color是处于img层下方的，无法实现遮罩效果，所以需要再创建一个div作为其子div,然后设置子div的背景颜色，要实现当前效果，我们需要在img外面加一层div。
样式：
.back {
background: url(./back.jpg);
background-repeat: no-repeat;
background-size: 400px;
}
.imgs {
height: 400px;
width: 400px;
/* 这里的背景色根据需求设置 */
background-color: aquamarine;
filter:Alpha(Opacity=60);
opacity: .6;
}
html:文章来源：https://www.toymoban.com/news/detail-511117.html
<div class="back">
<div class="imgs"></div>
</div>
此时我们就可以实现我们需要的效果了。
大家有什么好的方法，多多补充哦！文章来源地址https://www.toymoban.com/news/detail-511117.html
到了这里，关于css 实现蒙版效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
