Css 彩色滤光片覆盖

我正在尝试在图像上创建一个颜色覆盖，如在这个应用程序中（图像上的绿色覆盖）：

在我看来，他们并不是简单地在图像上涂上颜色。看起来他们在使用某种绿色过滤器。我如何用CSS来模拟这一点

以下是我启动的JSFIDLE：

HTML：

<img src="http://www.planwallpaper.com/static/images/canberra_hero_image.jpg" />

img {
  display: block;
}

/* Filter */
img:after {
  content: "";
}

---

这可能不是你想要的，但我在图像上设置了一个伪过滤器

img{
显示：块；
z指数：1；
}
分区包装器{
位置：相对位置；
显示：内联块；
}
/*滤器*/
俯冲{
内容：“；
背景：rgba（0200,0,0.5）；
位置：绝对位置；
身高：100%；
宽度：100%；
排名：0；
左：0；
z指数：2；
}

HTML：

 <div class="image-container">
        <img src="http://s6.picofile.com/file/8228890334/city_h_c_301_444_9.jpg" width="200px" height="300px" />
        <div class="after">Put your contetnt here</div>
    </div>    

结果:

另一个解决方案是使用CSS过滤器。例如

过滤器函数


例如：

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/redwood-ukulele-top.jpg" alt="ukulele">   

结果：

阅读更多信息
CSS过滤器的组合是一种方法，但如果看不到实际的源页面，就很难确定


.wrap{
宽度：400px；
高度：400px；
保证金：1em自动；
位置：相对位置；
}
.包裹img{
-webkit过滤器：深褐色（100%）色调旋转（90度）饱和（400%）；
过滤器：乌贼墨（100%）色调旋转（90度）饱和（400%）；
}
如Paulie_D回答中所示，一种可能性是使用过滤器

另一个可能性是使用混合模式

您可以使用亮度，它从正面图像获取亮度，从背面图像获取颜色

或者你也可以使用颜色，反过来也可以

这取决于什么布局能更好地适应您的需要


正文{
背景颜色：灰色；
}
div{
显示：内联块；
宽度：360px；
高度：270px；
位置：相对位置；
边框：实心1px黑色；
右边距：40px；
}
.内部{
位置：绝对位置；
左：50px；
顶部：50px；
宽度：100%；
身高：100%；
背景色：红色；
边界半径：50%；
}
格林先生{
背景颜色：绿色；
}
.形象{
背景图像：url（“https://placekitten.com/1000/750");  
背景尺寸：封面；
}
.颜色{
混合模式：颜色；
}
.光度{
混合模式：亮度；
}

图像已不存在，但可以查看以开始…已查看该文章。没什么帮助。我替换了图像：正如我所说，“看起来他们并不是简单地在图像上添加颜色。看起来他们使用了某种绿色过滤器”。@user5685147，我编辑了我的答案，可能对你有用。正如我所说，“看起来他们并不是简单地在图像上添加颜色。看起来他们使用了某种绿色过滤器”。
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/redwood-ukulele-top.jpg" alt="ukulele">   

 img { display: block; width: 90%; }

    img {
      -webkit-filter: sepia(1);
      filter: sepia(1);
    }