Как сделать фоновое изображение черно-белым?

Существуют ли какие-либо фильтры, которые сделают фоновое изображение черно-белым?

У меня есть изображение, установленное в качестве фонового изображения с использованием CSS, но теперь мне нужно применить фильтр, чтобы изображение отображалось только в черно-белом варианте. В идеале, я также хотел бы применить к нему непрозрачность.

Эффект, которого я на самом деле пытаюсь добиться, заключается в том, чтобы фоновое изображение было черно-белым, а при наведении на элемент span фильтр удалялся, открывая цветную версию.

И, конечно, это должно работать в Firefox, Chrome и Internet Explorer.

В этом вопросе не хватает более актуального ответа.

Ответ — да, теперь это возможно, и это хорошо поддерживается современными браузерами (хотя иронично, что не в IE10+ без JavaScript). Вы обращаетесь к CSS-свойству filter (которое делает много других классных вещей, кроме черно-белого).

Пост в блоге здесь более подробно:

http://demosthenes.info/blog/532/Convert-Images-To-Black-And-White-With-CSS

А также этот вопрос здесь на Stack Exchange, который вызывает некоторый интерес и на который стоит подписаться оп:

https://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css

И, наконец, фактический кусок кода, без зазрения совести заимствованный из ответа Stack Exchange и протестированный в Chrome и IE9:

.my_image_class
{ 
    filter: grayscale(100%); /* Текущий проект стандарта */
    -webkit-filter: grayscale(100%); /* Новый WebKit */
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); /* Еще не поддерживается в Gecko, Opera или IE */ 
    filter: url(resources.svg#desaturate); /* Gecko */
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Старый WebKit */
}

Для CSS я не думаю, что вы сможете добиться эффекта нажатия с помощью какого-либо типа фильтра. Вы можете использовать 2 версии изображения, одно цветное и одно черно-белое, объединить их в одно изображение с каждой версией рядом, и смещать изображения, когда мышь наводится на него, используя технику CSS спрайтов…http://www.alistapart.com/articles/sprites

Вариант — использовать SVG-фильтры:
https://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css

IE имеет встроенный фильтр, который вы можете использовать (см. ответы по ссылке).

Я не думаю, что CSS когда-либо задумывался для интересных графических ‘фильтров’, хотя непрозрачность, похоже, является полезным исключением. Просто замените фоновое изображение

span:hover {opacity: 1.0 ; background-image:url(someimage.png); } 

Посмотрите на http://www.pixastic.com/lib/

http://webdesignerwall.com/tutorials/html5-grayscale-image-hover

“Этот демо-версией предназначена для того, чтобы показать вам, как создать эффект наведения черно-белого/цветного изображения с помощью HTML5 и jQuery. Для достижения этого эффекта раньше HTML5 требовалось два изображения: цветная и черно-белая версия. Теперь HTML 5 упростил и ускорил этот процесс, потому что черно-белое изображение генерируется из оригинального источника. Надеюсь, что вы найдете этот скрипт полезным в своем дизайне, например в портфолио, фотогалерее и т.д.

Код jQuery будет искать целевые изображения и генерировать черно-белую версию. При наведении на изображение, оно изменит черно-белое изображение на цветное.”

Это должно помочь вам!

Посмотрите на это :
http://sag-3.blogspot.com/2012/11/grayscale-using-css.html

Этот метод является чистым CSS и будет работать во всех webkit браузерах.

Итак, код:

HTML :

<div id="background-image" style="background:url(image.png);"></div>

CSS :

#background-image:hover{-webkit-filter: grayscale(100%);}