Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Greyscale Background Css Images

I've searched a lot on the web but I cannot find a cross browser solution to fade a css backgrund image to greyscale and back.

The only working solution is to apply CSS3 filter greyscale:

-webkit-filter: grayscale(100%); 

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

Many pages online speaks about this solution to grey out 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 seem to work for css background images, as the webkit filter do.

Are there any solution (maybe with jquery?) to hack this lack of support for filter on less advanced browsers?

like image 934
bluantinoo Avatar asked May 02 '13 14:05

bluantinoo


People also ask

How do you add a background image to grayscale in CSS?

Greyscale Hover: -webkit-filter: grayscale(100%); Greyscale "Hover-out": -webkit-filter: grayscale(0%);

How do I GREY out an image in CSS?

Converts the image to grayscale. 0% (0) is default and represents the original image. 100% will make the image completely gray (used for black and white images).

How do you make a background image black in CSS?

Use the background-blend-mode Property to Darken Background Image in CSS. We can use the background-blend-mode property to darken the background image in CSS. The property sets the blending mode of the background.

How do I change the background-color of an image in CSS?

By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally. Tip: The background of an element is the total size of the element, including padding and border (but not the margin). Tip: Always set a background-color to be used if the image is unavailable.


1 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 it in FireFox, Chrome and IE. I've also attached an image to show my results of my implementation of this.Grayscale Background Image in DIV Sample

EDIT: Also, if you want the image to just toggle back and forth with jQuery, here's the page source for that...I've included the web link to jQuery and and image that's online so you should just be able to copy/paste to test it out:

<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 as of late, so here's an updated solution that will allow you to grayscale (or desaturate) 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>
like image 141
Element808 Avatar answered Sep 23 '22 08:09

Element808