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

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

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

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


当前回答

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

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

其他回答

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

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

对于Firefox中的灰度百分比,请使用饱和滤镜(搜索'saturate')

filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='saturate'><feColorMatrix in='SourceGraphic' type='saturate' values='0.2' /></filter></svg>#saturate"

事实上,如果我记得正确地使用了一个专有的CSS属性,用IE更容易做到这一点。试试这个滤镜:灰色,来自http://www.ssi-developer.net/css/visual-filters.shtml

Ax的方法只是使图像透明,并在其后面有黑色背景。你肯定会说这是灰度图。

虽然您不想使用Javascript,但我认为您必须使用它。您也可以使用服务器端语言来实现这一点。

即使有CSS3或专有的-webkit-或-moz- CSS属性,看起来也不可能(目前)。

然而,我确实发现了去年6月在HTML上使用SVG过滤器的文章。目前在任何浏览器中都无法使用(演示版本暗示了一个自定义WebKit构建),但作为概念的证明,它非常令人印象深刻。

你不需要使用那么多的前缀来充分使用,因为如果你为旧的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%);
}