Best IT Recipes

Grayscale Icons

I searched a lot on the internet but can't find cross browser solution to display css backgrund image in grayscale and vice versa.

The only working solution is to apply a series of CSS3 filter tints:

-webkit-filter: grayscale(100%);

but this only works with Chrome v.15 + and Safari v.6 + (as you can see here: http://css3.bradshawenterprises.com/filters/ )

Many pages on the Internet talk about this solution with gray elements:

 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 */ filter: gray; /* IE6-9 */

(as you can see here: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html )

But actually it does not work for css background images, as the webkit filter does.

Is there any solution (possibly with jquery?) To crack this lack of filter support on less advanced browsers?

+46
css cross-browser image background grayscale
May 2 '13 at 14:03
source share
4 answers

Here you go:

 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>bluantinoo CSS Grayscale Bg Image Sample</title> <style type="text/css"> div { border: 1px solid black; padding: 5px; margin: 5px; width: 600px; height: 600px; float: left; color: white; } .grayscale { background: url(yourimagehere.jpg); -moz-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"); -o-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"); -webkit-filter: grayscale(100%); filter: gray; 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"); } .nongrayscale { background: url(yourimagehere.jpg); } </style> </head> <body> <div class="nongrayscale"> this is a non-grayscale of the bg image </div> <div class="grayscale"> this is a grayscale of the bg image </div> </body> </html>

Tested in FireFox, Chrome and IE. I also added an image to show the results of my implementation. Grayscale Background Image in DIV Sample

EDIT: Also, if you want the image to simply switch back and forth using jQuery, here is the source of the page for this ... I have included the web link in jQuery and the image that is online so you can just copy / paste, to check this:

 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>bluantinoo CSS Grayscale Bg Image Sample</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <style type="text/css"> div { border: 1px solid black; padding: 5px; margin: 5px; width: 600px; height: 600px; float: left; color: white; } .grayscale { background: url(http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg); -moz-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"); -o-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"); -webkit-filter: grayscale(100%); filter: gray; 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"); } .nongrayscale { background: url(http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg); } </style> <script type="text/javascript"> $(document).ready(function () { $("#image").mouseover(function () { $(".nongrayscale").removeClass().fadeTo(400,0.8).addClass("grayscale").fadeTo(400, 1); }); $("#image").mouseout(function () { $(".grayscale").removeClass().fadeTo(400, 0.8).addClass("nongrayscale").fadeTo(400, 1); }); }); </script> </head> <body> <div id="image" class="nongrayscale"> rollover this image to toggle grayscale </div> </body> </html>

EDIT 2 (for IE10-11 users): The solution above will not work with the changes Microsoft has made to the browser recently, so an updated solution has appeared here that will allow you to get grayscale (or discolor) your images.

 <svg> <defs> <filter xmlns="http://www.w3.org/2000/svg" id="desaturate"> <feColorMatrix type="saturate" values="0" /> </filter> </defs> <image xlink:href="http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg" width="600" height="600" filter="url(#desaturate)" /> </svg>
+56
Feb 20 '14 at 5:33
source share

Using current browsers, you can use it as follows:

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

and fix it:

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

worked with me and much shorter. CSS can do even more:

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

For more information and browser support, see this: http://www.w3schools.com/cssref/css3_pr_filter.asp

+8
Sep 12 '16 at 10:50
source share

You do not need to use complex encoding!

In shades of gray:

-webkit-filter: shades of gray (100%);

Shade of gray "Hover-out":

-webkit-filter: shades of gray (0%);



I just had my css class have a separate hover class and added in the second shade of gray. It is really easy if you really don't like complexity.

-four
Dec 19 '14 at 4:01
source share

You can also use:

 img{ filter:grayscale(100%); } img:hover{ filter:none; }
-four
Jun 19 '15 at 12:29
source share


More articles:


All Articles