是否有一个简单的方法来显示一个彩色位图的灰度与只是HTML/CSS?
它不需要与ie兼容(我想它也不会)——如果它能在FF3和/或Sf3中工作,那对我来说就足够了。
我知道我可以用SVG和Canvas来做,但现在看起来工作量很大。
真的有懒人能做到的方法吗?
是否有一个简单的方法来显示一个彩色位图的灰度与只是HTML/CSS?
它不需要与ie兼容(我想它也不会)——如果它能在FF3和/或Sf3中工作,那对我来说就足够了。
我知道我可以用SVG和Canvas来做,但现在看起来工作量很大。
真的有懒人能做到的方法吗?
当前回答
对于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"
其他回答
你可以使用jFunc的一个函数——使用函数"jFunc_CanvasFilterGrayscale" http://jfunc.com/jFunc-functions.aspx
如果您愿意使用Javascript,那么您可以使用画布将图像转换为灰度。因为Firefox和Safari支持<canvas>,所以它应该可以工作。
所以我在谷歌上搜索了“canvas grayscale”,第一个结果是http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html,似乎可以。
也许这样能帮到你
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
w3schools.org
用CSS实现灰度最简单的方法是通过filter属性。
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
该属性仍然不完全支持,并且仍然需要-webkit-filter属性来支持所有浏览器。
对于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"