CSS彩色滤光片叠加

Question

我想在图片上即可创建一个颜色叠加，如在此应用程序（绿色覆盖在图像上）：

http://i.imgur.com/4XK9J6G.png

对我来说，它看起来并不就像他们只是在图像上添加颜色一样。看起来他们正在使用某种绿色过滤器。我怎样才能用CSS来模拟这个？

这里的的jsfiddle我开始：https://jsfiddle.net/5ar4713h/embedded/result/

HTML：

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

CSS：

img { 
    display: block; 
} 

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

Answer 1

CSS过滤器的组合将是一个方法，但没有看到实际的源页面很难确定。

.wrap { 
 
    width: 400px; 
 
    height: 400px; 
 
    margin: 1em auto; 
 
    position: relative; 
 
} 
 

 
.wrap img { 
 
    -webkit-filter: sepia(100%) hue-rotate(90deg) saturate(400%); 
 
    filter: sepia(100%) hue-rotate(90deg) saturate(400%); 
 
}

<div class="wrap"> 
 
<img src="http://lorempixel.com/image_output/nature-q-c-400-400-6.jpg" alt="" /> 
 
</div>

可替代地，用透明的绿色覆盖一个简单的灰度滤波器。

.wrap { 
 
    width: 400px; 
 
    height: 400px; 
 
    margin: 1em auto; 
 
    position: relative; 
 
} 
 
.wrap:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 50%; 
 
    height: 100%; 
 
    background: rgba(0, 150, 0, 0.75); 
 
} 
 
.wrap img { 
 
    -webkit-filter: grayscale(100%); 
 
    filter: grayscale(100%); 
 
}

<div class="wrap"> 
 
    <img src="http://lorempixel.com/image_output/nature-q-c-400-400-6.jpg" alt="" /> 
 
</div>

Answer 2

嗯，这可能不是你想要的，但我得到了一个图像上的伪过滤器

img { 
 
    display: block; 
 
    z-index: 1; 
 
} 
 

 
div.wrapper { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
/* Filter */ 
 
div.over { 
 
    content: ""; 
 
    background: rgba(0,200,0,0.5); 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 2; 
 
}

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

Answer 3

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：

.image-container { 
    position: relative; 
    width: 200px; 
    height: 300px; 
} 
.image-container .after { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    display: none; 
    color: #FFF; 
} 
.image-container:hover .after { 
    display: block; 
    transition:all 0.2s ease; 
    background: rgba(0, 0, 0, .6); 
} 

结果：Overlay

其他的解决方案是，期运用CSS filter.such作为Filter Functions。
Exmple：

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

CSS：

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

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

和效果：Filter Functions
阅读更多相关资讯here

Answer 4

如Paulie_D答案所示，一个posibility是使用过滤器。

其他可能性是使用混合模式。

您可以使用光度，这需要从正面图像的亮度，并从背面图像

或者你可以使用颜色，这一轮工作的其他方式的颜色。

这只是取决于什么样的布局调整好您的需求

body { 
 
    background-color: gray; 
 
} 
 

 
div { 
 
    display: inline-block; 
 
    width: 360px; 
 
    height: 270px; 
 
    position: relative; 
 
    border: solid 1px black; 
 
    margin-right: 40px; 
 
} 
 

 
.inner { 
 
    position: absolute; 
 
    left: 50px; 
 
    top: 50px; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: red; 
 
    border-radius: 50%; 
 
} 
 

 
.green { 
 
    background-color: green; 
 
} 
 

 
.image { 
 
    background-image: url("https://placekitten.com/1000/750"); 
 
    background-size: cover; 
 
} 
 

 
.color { 
 
    mix-blend-mode: color; 
 
} 
 

 
.luminosity { 
 
    mix-blend-mode: luminosity; 
 
}

<div class="image"> 
 
    <div class="inner green color"></div> 
 
</div> 
 
<div class="green"> 
 
    <div class="inner image luminosity"></div> 
 
</div>