Arrière-plan en niveaux de gris – Images CSS

J’ai beaucoup cherché sur le web mais je ne trouve pas de solution multi-navigateurs pour faire disparaître une image backgrund CSS en niveaux de gris et en arrière.

La seule solution efficace consiste à appliquer une échelle de gris de filtre CSS3:

-webkit-filter: grayscale(100%); 

mais cela fonctionne uniquement avec Chrome v.15 + et Safari v.6 + (comme vous pouvez le voir ici: http://css3.bradshawentersockets.com/filters/ )

Beaucoup de pages en ligne parlent de cette solution aux éléments grisés:

 filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE6-9 */ 

(comme vous pouvez le voir ici: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html )

Mais en réalité, il ne semble pas fonctionner pour les images d’arrière-plan CSS, comme le fait le filtre Webkit.

Existe-t-il une solution (peut-être avec jquery?) Pour pirater ce manque de support pour filtrer les navigateurs moins avancés?

Voici:

   bluantinoo CSS Grayscale Bg Image Sample    
this is a non-grayscale of the bg image
this is a grayscale of the bg image

Testé dans FireFox, Chrome et IE. J’ai également joint une image pour montrer mes résultats. Image d'arrière-plan en niveaux de gris dans l'échantillon DIV

EDIT: En outre, si vous voulez que l’image change simplement avec jQuery, voici la source de cette page. J’ai inclus le lien Web vers jQuery et l’image en ligne pour que vous puissiez simplement copier / coller pour le tester:

   bluantinoo CSS Grayscale Bg Image Sample      
rollover this image to toggle grayscale

EDIT 2 (pour les utilisateurs d’IE10-11): La solution ci-dessus ne fonctionnera pas avec les modifications apscopes récemment par Microsoft au navigateur. Voici donc une solution mise à jour qui vous permettra de graver (ou désaturer) vos images.

         

En utilisant les navigateurs actuels, vous pouvez l’utiliser comme ceci:

 img { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); } 

et d’y remédier:

 img:hover{ -webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */ filter: grayscale(0%); } 

travaillé avec moi et est beaucoup plus court. Il y a encore plus à faire dans le CSS:

 filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); 

Pour plus d’informations et les navigateurs compatibles, consultez le site http://www.w3schools.com/cssref/css3_pr_filter.asp

Vous pouvez aussi utiliser:

 img{ filter:grayscale(100%); } img:hover{ filter:none; } 

Vous n’avez pas besoin d’utiliser un codage compliqué vraiment!

Échelle de gris

-webkit-filter: échelle de gris (100%);

Échelle de gris “Hover-out”:

-webkit-filter: échelle de gris (0%);


J’ai simplement fait en sorte que ma classe css ait une classe de survol séparée et l’ajoutée dans la deuxième échelle de gris. C’est vraiment simple si vous n’aimez pas vraiment la complexité.