Монохромная картинка через css

[kidar2]

Добрый день.

Подскажите плз. Можно ли как-то задать картинке монохромный (чёрно-белый) стиль без создания новой картинки? В IE есть такое решение filter : gray. А для других браузеров делают через svg. Может есть что=то стандартное?

[SelenIT]

Есть вариант со скриптом через Canvas, имхо, поддержка у него чуть пошире, чем у SVG-фильтров. В частности, есть вот такой JQ-плагин. Более стандартного, боюсь, пока не сделали...

[kidar2]

Есть вариант со скриптом через Canvas, имхо, поддержка у него чуть пошире, чем у SVG-фильтров. В частности, есть вот такой JQ-плагин. Более стандартного, боюсь, пока не сделали...

Спасибо, даже в IE8 работает... интересно как?

[SelenIT]

Для IE (полагаю, любых) — через всё тот же фильтр

[kidar2]

Оказывается без дополнительного тэга img никак... просто у нас картинки размещаются через спрайты и background-image. А в этом плагине картинка для canvas берётся из img. Может есть вариант без canvas вообще?

К тому же будет довольно накладно создавать n canvas'ов.

[MiksIr]

Зависит, конечно, от вашей верстки. Можно грузить всю картинку жавоскрипом, генерировать один большой canvas и потом использовать его для спрайтов запихивая с нужным смещением в контейнер с overflow: hidden. Хотя проще в таком случае ее заранее сделать ч/б =)

Этот js плагин используем только в одном месте и... под большим вопросом. На самом деле его задача исключительно экономия трафика. С другой стороны, на большом количестве больших картинок генерация канваса начинает давать ощутимые лаги. А учитывая, что с прозрачными png-шками в ИЕ9 опять полезли какие-то баги при использовании filter: gray, то и там пока что canvas. Без прозрачности, наверно, такой проблемы нет.

[dima2612]

img {-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: grayscale(100%);

filter: gray}

[SelenIT]

 

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

не нужны