Изображение в градациях серого CSS для IE 10

Есть ли способ, чтобы фильтр изображений в оттенках серого работал на IE 10 без JavaScript или SVG?

Я успешно использовал следующий код во всех браузерах, кроме IE 10.

img{
filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter     id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /*     Firefox 10+, Firefox on Android */
filter:gray; /* IE6-9 */
-webkit-filter:grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);}

Ответ 1

Этот подход работает только в WebKit и Firefox. Он не работает в IE или Opera. В настоящее время WebKit является единственным браузером, поддерживающим фильтры CSS, в то время как Firefox поддерживает фильтры SVG в HTML. Opera и IE поддерживают SVG-фильтры, но только для содержимого SVG.

В IE10 нет хорошего способа сделать эту работу, так как она отказалась от поддержки устаревших фильтров IE. Однако есть способ, чтобы Id не рекомендовал его.

Вы можете настроить отображение IE10 с использованием режима стандартов IE9 с использованием следующего мета-элемента в голове:

<meta http-equiv="X-UA-Compatible" content="IE=9">

Это вернет поддержку для устаревших фильтров IE. Однако он имеет побочный эффект отбрасывания IE в режим IE9, где последние улучшения в IE10 больше не будут поддерживаться. В вашем случае может оказаться, что вам не нужны эти новые функции в настоящее время, но если вы поедете по этой дороге, вам нужно будет знать об этом при обновлении сайта в будущем.

Ответ 2

http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js/

http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js-v2-0-with-browser-feature-detection-using-modernizr/

Вышеприведенные ссылки дают хорошее представление о > IE10 и других браузерах.

Ответ 3

Это кросс-браузерное решение с использованием HTML5 и jquery с использованием эффекта fade

Код

Demo