Этот код CSS работает очень хорошо для Internet Explorer до 9.
img.gray {
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");
filter: gray;
-webkit-filter: grayscale(1);
}
Но что мне нужно сделать для Internet Explorer 10?
IE10 не поддерживает фильтры DX, как это делали IE9 и ранее, и не поддерживает префиксную версию фильтра оттенков серого.
Однако вы можете использовать наложение SVG в IE10 для выполнения режима серого. Пример:
img.grayscale:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}
svg {
background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}
(from: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html)
Упрощенный JSFiddle: http://jsfiddle.net/KatieK/qhU7d/2/
Подробнее об эффектах фильтра SVG IE10: http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx
Inline SVG может использоваться в IE 10 и 11 и Edge 12.
Я создал проект под названием серый, который включает polyfill для этих браузеров. polyfill отключает теги <img> с встроенным SVG: https://github.com/karlhorky/gray
Чтобы реализовать, короткая версия - загрузить плагин jQuery по ссылке GitHub выше и добавить после jQuery в конце вашего тела:
<script src="/js/jquery.gray.min.js"></script>
Тогда каждое изображение с классом grayscale будет выглядеть серым.
<img src="/img/color.jpg" class="grayscale">
Вы можете посмотреть демонстрацию, если хотите.
Использовать этот плагин jQuery https://gianlucaguarini.github.io/jQuery.BlackAndWhite/
Это, похоже, единственное решение для кросс-браузера. Кроме того, он имеет приятный эффект и эффект угасания.