是否有一个简单的方法来显示一个彩色位图的灰度与只是HTML/CSS?
它不需要与ie兼容(我想它也不会)——如果它能在FF3和/或Sf3中工作，那对我来说就足够了。
我知道我可以用SVG和Canvas来做，但现在看起来工作量很大。
真的有懒人能做到的方法吗?
当前回答
旧浏览器的替代方案可能是使用伪元素或内联标签产生的掩码。
绝对定位悬停在一个img(或文本区域，不需要点击或选择)可以密切模仿的效果的颜色比例，通过rgba()或半透明png。
它不会给出一个单一的颜色尺度，但会将颜色的阴影超出范围。
在代码笔上用10种不同的颜色通过伪元素进行测试，最后是灰色。http://codepen.io/gcyrillus/pen/nqpDd(重新加载以切换到另一个图像)
其他回答
旧浏览器的替代方案可能是使用伪元素或内联标签产生的掩码。
绝对定位悬停在一个img(或文本区域，不需要点击或选择)可以密切模仿的效果的颜色比例，通过rgba()或半透明png。
它不会给出一个单一的颜色尺度，但会将颜色的阴影超出范围。
在代码笔上用10种不同的颜色通过伪元素进行测试，最后是灰色。http://codepen.io/gcyrillus/pen/nqpDd(重新加载以切换到另一个图像)
更新:我把它做成了一个完整的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%);
}
下面是一个用于LESS的mixin，它可以让你选择任何不透明度。为纯CSS以不同的百分比填写变量。
这里有个小提示，它使用饱和类型的矩阵所以你不需要做任何花哨的事情来改变百分比。
.saturate(@value:0) {
@percent: percentage(@value);
filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='saturate'%20values='@value'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: grayscale(@percent); /* Current draft standard */
-webkit-filter: grayscale(@percent); /* New WebKit */
-moz-filter: grayscale(@percent);
-ms-filter: grayscale(@percent);
-o-filter: grayscale(@percent);
}
然后使用它:
img.desaturate {
transition: all 0.2s linear;
.saturate(0);
&:hover {
.saturate(1);
}
}
你可以使用jFunc的一个函数——使用函数"jFunc_CanvasFilterGrayscale" http://jfunc.com/jFunc-functions.aspx
试试这个jquery插件。虽然，这不是一个纯粹的HTML和CSS解决方案，但它是实现您想要的效果的一种懒惰的方式。您可以自定义您的灰度，以最适合您的使用。使用方法如下:
$("#myImageID").tancolor();
有一个互动演示。你可以摆弄它。
查看有关使用方法的文档，它非常简单。文档
