Skip to content

Instantly share code, notes, and snippets.

@zmts

zmts/Cross-browser B\W image

Last active September 6, 2016 08:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zmts/2f25ab9d1673aafa28cc030314e582a3 to your computer and use it in GitHub Desktop.
Save zmts/2f25ab9d1673aafa28cc030314e582a3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Cross-browser B\W image
.bw{
width: 450px;
height: 450px;
background-repeat: no-repeat;
background-image: url(http://i.imgur.com/GEJoUAB.jpg);
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); /* IE 10-11 */
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */
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 */
}
// live example >> http://codepen.io/rqnix/pen/YWrdLv
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment