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

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

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

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


当前回答

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

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

其他回答

旧浏览器的替代方案可能是使用伪元素或内联标签产生的掩码。

绝对定位悬停在一个img(或文本区域,不需要点击或选择)可以密切模仿的效果的颜色比例,通过rgba()或半透明png。

它不会给出一个单一的颜色尺度,但会将颜色的阴影超出范围。

在代码笔上用10种不同的颜色通过伪元素进行测试,最后是灰色。http://codepen.io/gcyrillus/pen/nqpDd(重新加载以切换到另一个图像)

在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:-)

一种新的方法已经在现代浏览器上出现了一段时间了。

背景混合模式可以让你得到一些有趣的效果,其中之一是灰度转换

设置在白色背景上的luminosity值允许这样做。 (鼠标悬停,灰色显示)

test { 宽度:300 px; 身高:200 px; 背景:url(“http://placekitten.com/1000/750”),白色; background-size:封面; } test:{徘徊 background-blend-mode:光度; } < div class = "测试" > < / div >

亮度取自图像,颜色取自背景。因为它总是白色的,所以没有颜色。

但它允许更多。

你可以将效果设置为3层。第一个是图像,第二个是黑白渐变。如果你应用混合模式,你会得到一个白色的结果,就像之前在白色部分,但原始图像在黑色部分(乘白色得到白色,乘黑色没有效果)。

在渐变的白色部分,你得到了和以前一样的效果。在渐变的黑色部分,您正在混合图像本身,结果是未经修改的图像。

现在,所有需要做的就是移动渐变来获得动态效果:(悬停可以看到颜色)

div { 宽度:600 px; 身高:400 px; } test { 背景:url(“http://placekitten.com/1000/750”), 线性渐变(0deg,白色33%,黑色66%),url(“http://placekitten.com/1000/750”); 背景-位置:0px 0px 0% 0px 0px; 背景尺寸:覆盖,100% 300%,覆盖; 背景-混合模式:亮度,倍增; 过渡:全部为2s; } test:{徘徊 背景位置:0px 0px, 0px 66%, 0px 0px; } < div class = "测试" > < / div >

参考

兼容性矩阵

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

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

一个糟糕但可行的解决方案是:使用Flash对象渲染图像,然后在Flash中为您提供所有可能的转换。

如果您的用户使用尖端浏览器,并且Firefox 3.5和Safari 4支持它(我不知道是否支持),您可以调整图像的CSS颜色配置文件属性,将其设置为灰度ICC配置文件URL。但那有很多假设!