Greyscale Background Css Images -
i've searched lot on web cannot find cross browser solution fade css backgrund image greyscale , back.
the working solution apply css3 filter greyscale:
-webkit-filter: grayscale(100%); but works chrome v.15+ , safari v.6+ (as can see here: http://css3.bradshawenterprises.com/filters/)
many pages online speaks solution 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 can see here:http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html)
but not seem work css background images, webkit filter do.
are there solution (maybe jquery?) hack lack of support filter on less advanced browsers?
here 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"> non-grayscale of bg image </div> <div class="grayscale"> grayscale of bg image </div> </body> </html> tested in firefox, chrome , ie. i've attached image show results of implementation of this.
edit: also, if want image toggle , forth jquery, here's page source that...i've included web link jquery , and image that's online should able copy/paste test 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 image toggle grayscale </div> </body> </html> edit 2 (for ie10-11 users): solution above not work changes microsoft has made browser of late, here's updated solution allow grayscale (or desaturate) 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>
Comments
Post a Comment