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

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

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

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


当前回答

试试这个jquery插件。虽然,这不是一个纯粹的HTML和CSS解决方案,但它是实现您想要的效果的一种懒惰的方式。您可以自定义您的灰度,以最适合您的使用。使用方法如下:

$("#myImageID").tancolor();

有一个互动演示。你可以摆弄它。

查看有关使用方法的文档,它非常简单。文档

其他回答

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

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

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

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

你可以用灰色填充。

webkit中对本地CSS过滤器的支持已从当前版本19.0.1084.46添加

所以-webkit-filter:灰度(1)将工作,这是更容易为webkit的SVG方法…

也许这样能帮到你

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

w3schools.org

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