Изображение в градациях серого с помощью CSS в Safari 5.x

Как вы можете видеть на caniuse.com , в настоящее время фильтры CSS3 поддерживаются очень немногими браузерами.

Есть много резервных вариантов JavaScript/jQuery, если вы погуглите «плагин javascript в градациях серого». Вот некоторые:

• Grayscale.js
• плагин jQuery GreyScale
• Hoverizr
• Сделайте это с холстом (учебник)

Но у меня нет опыта с ними, поэтому я не могу предложить вам, какой из них лучше.

Я пробовал jQuery Black And White давным-давно, и это доставило мне много проблем с изображениями с относительным/абсолютным позиционированием, поэтому может быть, избежать этого.

Включив эту сборку Modernizr на свои страницы, вы можете настроить браузер, не поддерживающий фильтры, через Javascript:

if(!Modernizr.css_filters){
    /* javascript fallback here */
}

или CSS:

.no-css_filters .element {
    /* css fallback here */
}

Да, и не забывайте, что dowebsites нужно смотреть точно так же во всех браузерах?

На самом деле все очень просто:

• http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html
• http://jsfiddle.net/KDtAX/487/

Я попытался использовать запасной вариант javascript, но это действительно не имело смысла, и это было очень медленно на больших изображениях. Это имело гораздо больше смысла. Обратите внимание, что для grayscale появился новый синтаксис, и мне пришлось вручную редактировать получившийся минимизированный CSS из LESS.

Вот мой миксин:

.filter (...) {
    -webkit-filter: @arguments;
    -moz-filter: @arguments;
    -ms-filter: @arguments;
    -o-filter: @arguments;
    filter: @arguments;
}

И мой класс:

.grayscale-hover, .home-image {
    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 see http://jsfiddle.net/KDtAX/487/*/
    .filter(grayscale(1) blur(1px));
    filter: gray; /* IE6-9 */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
    &:hover {
        .filter(none);
        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");
    }
}

Работает и протестировано в IE 6+, Firefox, Chrome.

Это что-то вроде этого:

.grayscale {    
   filter: url(css/grayscale.svg#greyscale);    
   -webkit-filter: grayscale(1);    
   -moz-filter: grayscale(100%);    
   -ms-filter: grayscale(100%);    
   -o-filter: grayscale(100%);    
} 

Вам также необходимо загрузить файл svg.

Это отлично сработало для меня:

img { float:left;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><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+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
    -webkit-transition: all 1.5s ease;
       -moz-transition: all 1.5s ease;
        -ms-transition: all 1.5s ease;
         -o-transition: all 1.5s ease;
            transition: all 1.5s ease;
            z-index: 40 !important;
             display:block;

 }

img:hover { 
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><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");
    -webkit-filter: grayscale(0%);}

Однако в Safari изображения выглядят действительно переэкспонированными (но они в оттенках серого). И переход не поддерживается Firefox.