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

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

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

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


当前回答

更新:我把它做成了一个完整的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%);
}

其他回答

事实上,如果我记得正确地使用了一个专有的CSS属性,用IE更容易做到这一点。试试这个滤镜:灰色,来自http://www.ssi-developer.net/css/visual-filters.shtml

Ax的方法只是使图像透明,并在其后面有黑色背景。你肯定会说这是灰度图。

虽然您不想使用Javascript,但我认为您必须使用它。您也可以使用服务器端语言来实现这一点。

也许这样能帮到你

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

w3schools.org

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怎么样?

你可以用灰色填充。

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

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

如果您愿意使用Javascript,那么您可以使用画布将图像转换为灰度。因为Firefox和Safari支持<canvas>,所以它应该可以工作。

所以我在谷歌上搜索了“canvas grayscale”,第一个结果是http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html,似乎可以。