css 实现蒙版效果

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:

<divclass="back"><divclass="imgs"></div></div>

此时我们就可以实现我们需要的效果了。
大家有什么好的方法，多多补充哦！