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:

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

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