Кроссбраузерное изображение в оттенках серого с помощью CSS

#css

#css

Вопрос:

Эффект оттенков серого плохо работает в Firefox, поэтому я использую альтернативу.

 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 */
  

Но после применения этого css ошибка firefox show me не смогла загрузить изображение.
Я применяю этот эффект в слайдере revolution, где может быть любое количество изображений.

Комментарии:

1. Можете ли вы создать скрипку?

2. на самом деле я тестирую это на revolution slider в WordPress

Ответ №1:

Это старое, но у меня была такая же проблема, и я нашел ее на их сайте разработчика, и это сработало для меня:

 filter: grayscale(100%);
  

Вот ссылка на их сайт для справки: https://developer.mozilla.org/en-US/docs/Web/CSS/filter