是否有一个简单的方法来显示一个彩色位图的灰度与只是HTML/CSS?
它不需要与ie兼容(我想它也不会)——如果它能在FF3和/或Sf3中工作，那对我来说就足够了。
我知道我可以用SVG和Canvas来做，但现在看起来工作量很大。
真的有懒人能做到的方法吗?
当前回答
即使有CSS3或专有的-webkit-或-moz- CSS属性，看起来也不可能(目前)。
然而，我确实发现了去年6月在HTML上使用SVG过滤器的文章。目前在任何浏览器中都无法使用(演示版本暗示了一个自定义WebKit构建)，但作为概念的证明，它非常令人印象深刻。
其他回答
事实上，如果我记得正确地使用了一个专有的CSS属性，用IE更容易做到这一点。试试这个滤镜:灰色，来自http://www.ssi-developer.net/css/visual-filters.shtml
Ax的方法只是使图像透明，并在其后面有黑色背景。你肯定会说这是灰度图。
虽然您不想使用Javascript，但我认为您必须使用它。您也可以使用服务器端语言来实现这一点。
如果您能够使用JavaScript，那么这个脚本可能就是您正在寻找的。它跨浏览器工作，目前为止对我来说工作得很好。您不能将它用于从不同域加载的图像。
http://james.padolsey.com/demos/grayscale/
今天又遇到了同样的问题。我最初使用SalmanPK解决方案，但发现FF和其他浏览器之间的效果不同。这是因为转换矩阵只对亮度有效，而不是像Chrome/IE中的滤镜那样对亮度有效。令我惊讶的是，我发现SVG中的另一种更简单的解决方案也适用于FF4+，并产生更好的结果:
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="desaturate">
<feColorMatrix type="saturate" values="0"/>
</filter>
</svg>
用css:
img {
filter: url(filters.svg#desaturate); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}
需要注意的是，IE10在标准兼容模式下不再支持“filter: gray:”，所以需要在头文件中切换兼容模式才能工作:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
下面是一个用于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);
}
}
Webkit支持CSS过滤器。所以我们现在有了一个跨浏览器的解决方案。
img { 过滤器:灰色;/* ie6-9 */ -webkit-filter:灰度(1);/*谷歌Chrome, Safari 6+ & Opera 15+ */ 过滤器:灰度(1);/* Microsoft Edge和Firefox 35+ */ ｝ /*禁用悬停时的灰度*/ img:{徘徊 -webkit-filter:灰度(0); 过滤器:没有; ｝ < img src = " https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Wikimedia_Canadian_Community_Logo.svg/240px-Wikimedia_Canadian_Community_Logo.svg.png " >
Internet Explorer 10怎么样?
你可以用灰色填充。
