Преобразование изображения в градации серого с помощью HTML/CSS

Самый простой способ добиться градаций серого с помощью CSS — использовать свойство filter.

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

Следует отметить, что это свойство пока не имеет полной поддержки во всех браузерах, поэтому необходимо использовать свойство -webkit-filter для обеспечения совместимости.

Если вы можете использовать JavaScript, тогда этот скрипт может быть тем, что вам нужно. Он работает во всех браузерах и пока что у меня не возникло с ним проблем. Обратите внимание, что вы не сможете использовать его с изображениями, загруженными с другого домена.

http://james.padolsey.com/demos/grayscale/

В Internet Explorer используйте свойство filter.

В браузерах на основе WebKit и Firefox в данный момент нет возможности десатурировать изображение исключительно с помощью CSS, поэтому вам понадобится использовать либо Canvas, либо SVG для решения на стороне клиента.

Тем не менее, я считаю, что использование SVG является более элегантным вариантом. Вы можете ознакомиться с моим постом в блоге, где я описываю решение на основе SVG, которое работает как для Firefox, так и для WebKit:
http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

И строго говоря, поскольку SVG является частью HTML, это решение представляет собой чистый HTML + CSS 😃

Если вы готовы использовать JavaScript, то вы можете воспользоваться элементом <canvas> для преобразования изображения в градации серого. Поскольку браузеры Firefox и Safari поддерживают <canvas>, это должно сработать.

Я посмотрел в Google по запросу "canvas grayscale", и первым результатом оказался сайт http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html, который, кажется, работает.

Поддержка нативных CSS-фильтров в WebKit была добавлена в текущей версии 19.0.1084.46. Таким образом, теперь свойство -webkit-filter: grayscale(1) будет работать, что является более простым решением по сравнению с подходом на основе SVG для WebKit.