是否有一个简单的方法来显示一个彩色位图的灰度与只是HTML/CSS?

它不需要与ie兼容(我想它也不会)——如果它能在FF3和/或Sf3中工作,那对我来说就足够了。

我知道我可以用SVG和Canvas来做,但现在看起来工作量很大。

真的有懒人能做到的方法吗?


当前回答

如果您愿意使用Javascript,那么您可以使用画布将图像转换为灰度。因为Firefox和Safari支持<canvas>,所以它应该可以工作。

所以我在谷歌上搜索了“canvas grayscale”,第一个结果是http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html,似乎可以。

其他回答

你不需要使用那么多的前缀来充分使用,因为如果你为旧的firefox选择前缀,你就不需要为新的firefox使用前缀。

为了充分使用,请充分使用以下代码:

img.grayscale {
    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 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

img.grayscale.disabled {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: none;
    -webkit-filter: grayscale(0%);
}

更新:我把它做成了一个完整的GitHub回购,包括针对IE10和IE11的JavaScript polyfill: https://github.com/karlhorky/gray

我最初使用SalmanPK的答案,但后来创建了下面的变体,以消除SVG文件所需的额外HTTP请求。内联SVG适用于Firefox 10及以上版本,低于10的版本甚至不再占全球浏览器市场的1%。

从那以后,我一直在这篇博文中更新这个解决方案,在演示中增加了对退色的支持,对SVG的IE 10/11支持,以及部分灰度的支持。

img.grayscale {
  /* Firefox 10+, Firefox on Android */
  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");

  /* IE 6-9 */
  filter: gray;

  /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  -webkit-filter: grayscale(100%);
}

img.grayscale.disabled {
  filter: none;
  -webkit-filter: grayscale(0%);
}

如果您愿意使用Javascript,那么您可以使用画布将图像转换为灰度。因为Firefox和Safari支持<canvas>,所以它应该可以工作。

所以我在谷歌上搜索了“canvas grayscale”,第一个结果是http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html,似乎可以。

如果您能够使用JavaScript,那么这个脚本可能就是您正在寻找的。它跨浏览器工作,目前为止对我来说工作得很好。您不能将它用于从不同域加载的图像。

http://james.padolsey.com/demos/grayscale/

webkit中对本地CSS过滤器的支持已从当前版本19.0.1084.46添加

所以-webkit-filter:灰度(1)将工作,这是更容易为webkit的SVG方法…