CSS-фильтр как модификатор цвета для одного изображения

Вы также можете раскрасить белые изображения, добавив сепию, а затем некоторую насыщенность, поворот оттенка, например. в CSS:

filter: sepia() saturate(10000%) hue-rotate(30deg)

Это должно сделать белое изображение зеленым.

http://jsbin.com/xetefa/1/edit

Это классная идея, но она не будет работать с белым изображением, как вы предлагаете. Вы можете сделать это с цветным изображением, но не с белым. Я попробовал следующее в Safari, используя версию CSS-фильтра webkit:

<div style="background-color:#FFF; -webkit-filter: hue-rotate(90deg); width:100px; height:100px; border:1px solid #000;"></div>

Но коробка остается белой. Если я переключу цвет на синий следующим образом:

<div style="background-color:#00F; -webkit-filter: hue-rotate(90deg); width:100px; height:100px; border:1px solid #000;"></div>

Я получаю красную коробку. Это связано с тем, что фильтр работает со значением оттенка, которого нет ни у белого, ни у черного.

На самом деле, к счастью, есть способ!

Основная трудность здесь, как упоминалось ранее, заключается в том, что в изображении в оттенках серого практически нет цвета. К счастью, есть фильтр, который может прокачать какой-то цвет!

sepia(100%)

Я попробовал следующий стиль css на сплошном цветном изображении, базовый цвет которого #ccc

sepia(100%) contrast(50%) saturate(500%) hue-rotate(423deg)

Мне удалось изменить цвет изображения на светло-зеленый.

Наслаждайтесь ;)

Попробуйте сделать brightness больше, чем 100%. Вы заметите, что изображение начнет исчезать до белого цвета, когда вы продвинетесь выше 100%. Темнота изображения будет определять, как далеко от 100% вам нужно переместиться.

img {

      -webkit-filter: brightness(1000%);

}

Помните, что только пользователи Google Canary могут видеть фильтры CSS3 и что фильтры CSS3 не влияют на изображение в любом другом браузере. (пока по крайней мере).