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: "";
}

- user5685147

---

图片已经不存在了，但是可以查看这个链接来开始... - segFault

已经看过那篇文章了，没有什么帮助。我替换了图片：http://i.imgur.com/4XK9J6G.png - user5685147

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>

- Paulie_D

Answer 2

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

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

您可以使用亮度，它从前景图像中获取亮度和从背景图像中获取颜色。

或者您可以使用颜色，它反过来工作。

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

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>

- vals

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

结果:覆盖

另一种解决方案是使用CSS过滤器，例如Filter函数。
示例：

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

并且结果：过滤函数
阅读更多信息 在这里

- Hamid Talebi

---

就像我所说的，“它看起来不像是他们只是在图像上涂上颜色。它看起来像是他们使用了某种绿色滤镜”。 - user5685147

@user5685147，我编辑了我的答案，也许对你有用。 - Hamid Talebi

Answer 4

这可能不是你想要的，但我对图像进行了伪过滤

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>

- segFault

---

正如我所说，“它看起来不像他们只是在图像上涂了一种颜色。它看起来像是使用了某种绿色滤镜”。 - user5685147