CSS Color Filter Overlay

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 ответ, один вешать является использование фильтров.

Другая возможность - использовать режим наложения.

Вы можете использовать светимость, которая принимает светимость от фронтального изображения и цвета задних изображений

Или вы можете использовать цвет, который работает наоборот.

Это зависит только от того, что макет настроить лучше для ваших потребностей

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>