оттенки серого в хром через css

Question

Есть ли способ сделать изображение в градациях серого в chrome через css?

Я пробовал это , но не работает на последней версии Chrome

Answer 1

поддержка встроенных CSS-фильтров в webkit была добавлена ​​в текущей версии 19.0.1084.46

, поэтому -webkit-filter: grayscale (1) будет работать, и этот подход лучше и проще, чем SVG для webkit...

Answer 2

Другим решением будет svg с уровнем косвенности.

По сути, <img src="wrapper.svg"/>, где wrapper.svg применяет svg-фильтр к svg, а svg имеет элемент изображения, указывающий на ваше растровое изображение. Работает в Opera, Chrome, Firefox и, вероятно, IE10 (не проверено).

Вот демоверсия . Вы можете передать свой собственный URL, если вы encodeURIComponent его первым. Обратите внимание, что для передачи параметров для работы он зависит от того, включен ли сценарий, поэтому, если вам нужно использовать его в элементах или в фоновом изображении css, вам необходимо сгенерировать файлы svg на сервере.

Answer 3

Пока нет, но Chrome 18 будет поддерживать CSS-фильтры (выпущен позже в этом году). Фильтры SVG поддерживаются только Firefox. Вы должны быть в состоянии найти согласованное решение canvas + javascript.

РЕДАКТИРОВАТЬ: см. Сообщение Эрика Дальстрёма для альтернативного решения.

Answer 4

Вот решение HTML5.Поддерживается текущими версиями Chrome: http://webdesignerwall.com/demo/html5-grayscale/