Как заставить работать «filter grayscale» для background-image в IE 11?

Question

[Mike]

Поделитесь пожалуйста рабочим способом.

У меня для каждого div'а прописан свой background-image. Нужно, чтобы изначально изображение было черно-белым, а при наведении становилось цветным.

Интересует работа в IE11. Уже устал это решать.

Текущий CSS:

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(100%);

Это последняя из многочисленных попыток заставить работать фичу.

Answer 1

[dom1n1k]

"Отфильтровать" бэкграунд, не трогая содержимое дива? Никак, насколько я знаю.
Только если сделать фоновую картинку и контент отдельными вложенными элементами, а потом фон засунуть под низ при помощи z-index.