是否有一个简单的方法来显示一个彩色位图的灰度与只是HTML/CSS?
它不需要与ie兼容(我想它也不会)——如果它能在FF3和/或Sf3中工作,那对我来说就足够了。
我知道我可以用SVG和Canvas来做,但现在看起来工作量很大。
真的有懒人能做到的方法吗?
是否有一个简单的方法来显示一个彩色位图的灰度与只是HTML/CSS?
它不需要与ie兼容(我想它也不会)——如果它能在FF3和/或Sf3中工作,那对我来说就足够了。
我知道我可以用SVG和Canvas来做,但现在看起来工作量很大。
真的有懒人能做到的方法吗?
当前回答
在Internet Explorer中使用filter属性。
在webkit和Firefox中,目前还没有办法仅用CSS来降低图像的饱和度。 所以你需要使用画布或SVG作为客户端解决方案。
但我认为使用SVG更优雅。看看我的博客文章,SVG解决方案,同时适用于Firefox和webkit: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html
严格来说,因为SVG是HTML,所以解决方案是纯HTML +css:-)
其他回答
webkit中对本地CSS过滤器的支持已从当前版本19.0.1084.46添加
所以-webkit-filter:灰度(1)将工作,这是更容易为webkit的SVG方法…
试试这个jquery插件。虽然,这不是一个纯粹的HTML和CSS解决方案,但它是实现您想要的效果的一种懒惰的方式。您可以自定义您的灰度,以最适合您的使用。使用方法如下:
$("#myImageID").tancolor();
有一个互动演示。你可以摆弄它。
查看有关使用方法的文档,它非常简单。文档
也许这样能帮到你
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
w3schools.org
对于Firefox,您不需要创建filter.svg文件,您可以使用数据URI方案。
第一个答案的css代码给出:
filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: grayscale(100%); /* Current draft standard */
-webkit-filter: grayscale(100%); /* New WebKit */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray; /* IE6+ */
注意将“utf-8”字符串替换为您的文件编码。
这种方法应该比其他方法快,因为浏览器不需要执行第二个HTTP请求。
如果您能够使用JavaScript,那么这个脚本可能就是您正在寻找的。它跨浏览器工作,目前为止对我来说工作得很好。您不能将它用于从不同域加载的图像。
http://james.padolsey.com/demos/grayscale/