在HTML/CSS中将图像转换为灰度

是否有一种简单的方法来显示灰度的彩色位图HTML/CSS？

它不需要与IE兼容(我想它不会) - 如果它在FF3和/或Sf3中工作,这对我来说已经足够了.

我知道我可以用SVGCanvas和Canvas 来做这件事,但现在看起来好像很多工作.

有一个真正懒惰的人这样做的方法吗？

支持CSS过滤器已经落入Webkit. 所以我们现在有一个跨浏览器的解决方案.

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;
}

    




    
IE10 with inline SVG
    

.test {
  width: 300px;
  height: 200px;
    background: url("http://placekitten.com/1000/750"), white; 
    background-size: cover;
}

.test:hover {
    background-blend-mode: luminosity;
}

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}