Is there a simple way to display a color bitmap in grayscale with just HTML/CSS
?
It doesn’t need to be IE-compatible (and I imagine it won’t be) — if it works in FF3 and/or Sf3, that’s good enough for me.
I know I can do it with both SVG
and Canvas, but that seems like a lot of work right now.
Is there a truly lazy person’s way to do this?
25 s
Support for CSS filters has landed in Webkit. So we now have a cross-browser solution.
img {
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}
/* Disable grayscale on hover */
img:hover {
-webkit-filter: grayscale(0);
filter: none;
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Wikimedia_Canadian_Community_Logo.svg/240px-Wikimedia_Canadian_Community_Logo.svg.png">
What about Internet Explorer 10?
You can use a polyfill like gray.