CSS3灰度滤镜在不同的图像上看起来不同答案

【问题标题】：CSS3 grayscale filter looks different on different imagesCSS3灰度滤镜在不同的图像上看起来不同
【发布时间】：2013-06-05 23:16:30
【问题描述】：

我有 3 个 FCB、twitter 和 RSS 图标，我希望它们是灰度的，但在悬停时它们应该变为彩色版本。它工作得很好，但是这 3 张图像的灰度看起来有点不同。有没有办法让它们看起来一样？这是我的灰度代码：

img.grayscale{
    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"); /* Firefox 10+, Firefox on Android */
    filter: gray;
    -webkit-filter: grayscale(1);
}

RSS 和 twitter 看起来几乎一样，但 FCB 图标要暗很多。我认为唯一的方法是使用灰度百分比。有没有其他解决办法？

【问题讨论】：

你能用你正在使用的实际图标创建一个 JSFiddle 演示吗？
给你jsfiddle.net/UfVA3
我现在明白了……你确定那是官方的 Facebook 蓝色吗？对我来说看起来有点暗。但无论如何，灰度可以正常工作，较深的颜色应该是较深的灰色！

标签： css grayscale

【解决方案1】：

可以在fb图片上添加一个fb类并设置

img.fb {
     opacity: 0.7;   
}

这会产生使图像更亮的错觉。

这里是jsfiddle

【讨论】：

是的，我知道，这就是为什么我说它会给人一种制造它的错觉。但在找到更好的解决方案之前，您可以使用它。