CSS 颜色过滤器叠加

CSS Color Filter Overlay

提问by user5685147

I'm trying to create a color overlay over an image, like in this app (the green overlay over the image):

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

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

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

To me, it doesn't look like they're simply putting a color over the image. It looks like they're using some sort of green filter. How can I emulate this with CSS?

对我来说，看起来他们并不是简单地在图像上涂上颜色。看起来他们正在使用某种绿色过滤器。我怎样才能用 CSS 模拟这个？

Here's the JSFiddle I started: https://jsfiddle.net/5ar4713h/embedded/result/

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

HTML:

HTML:

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

CSS:

CSS:

img {
  display: block;
}

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

回答by Paulie_D

A combination of CSS filters would be one method but without seeing the actual source page it's hard to be certain.

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>

Alternatively, a simple greyscale filter with a transparent green overlay.

或者，一个带有透明绿色覆盖层的简单灰度过滤器。

.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>

回答by vals

As shown in Paulie_D answer, one posibility is to use filters.

如 Paulie_D 答案所示，一种可能性是使用过滤器。

The other posibility is to use a blend mode.

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

You can use luminosity, that takes the luminosity from the front image and the color from the back image

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

Or you can use color, that works the other way round.

或者您可以使用颜色，反之亦然。

It just depends what layout adjust better to your needs

这仅取决于哪种布局更适合您的需求

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>

回答by segFault

Well this may not be what you wanted, but I got a pseudo filter over the image

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

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>

回答by Hamid Talebi

HTML:

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:

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);
}   

Result:Overlay

结果：叠加

Other solution is that useing CSS filter.such as Filter Functions.
Exmple:

其他解决方案是使用 CSS filter.such as Filter Functions。
例子：

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

CSS:

CSS：

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

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

and result:Filter Functions
read more info here

结果：过滤功能在这里
阅读更多信息