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

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

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

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


当前回答

根据robertc的回答:

为了得到从彩色图像到灰度图像的正确转换,而不是像这样使用矩阵:

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

你应该像这样使用转换矩阵:

0.299 0.299 0.299 0
0.587 0.587 0.587 0
0.112 0.112 0.112 0
0     0     0     1

这对于基于RGBA(红-绿-蓝-alpha)模型的所有类型的图像都可以正常工作。

关于为什么你应该使用矩阵的更多信息,我发布了更可能的robertc的一个检查以下链接:

亮度和色差信号 马格斯的回答:“colorvalue中的greyscalevalue”@stackoverflow部分:编辑2:@Hans Passant Charles A. Bouman -普渡大学-模拟电视第20和21页 在这里你可以找到一些c#和VB代码

其他回答

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

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

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

根据brillout.com的回答和Roman Nurik的回答,稍微放宽了“无SVG”的要求,您可以仅使用单个SVG文件和一些CSS来降低Firefox中的图像饱和度。

您的SVG文件将如下所示:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
    <filter id="desaturate">
        <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>

将其保存为resources.svg,从现在开始,它可以用于任何您想要更改为灰度的图像。

在CSS中,使用Firefox特定的filter属性引用过滤器:

.target {
    filter: url(resources.svg#desaturate);
}

如果你喜欢,也可以添加MS专有的,将该类应用到任何你想转换为灰度的图像(适用于Firefox >3.5, IE8)。

编辑:这里有一篇不错的博客文章,描述了在SalmanPK的答案中使用新的CSS3过滤器属性与这里描述的SVG方法相一致。使用这种方法,你最终会得到这样的结果:

img.desaturate{
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
    -webkit-filter: grayscale(100%); /* New WebKit */
    filter: url(resources.svg#desaturate); /* older Firefox */
    filter: grayscale(100%); /* Current draft standard */
}

更多的浏览器支持信息请点击这里。

也许这样能帮到你

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

w3schools.org

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

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

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

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

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

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