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>