css - CSS3灰度滤镜在不同的图像上看起来不同

Question

我有 FCB、twitter 和 RSS 的 3 个图标，我希望它们是灰度的，但在悬停时它们应该变为彩色版本。它工作得很好，但是这 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 图标要暗很多。我认为唯一的方法是使用灰度百分比。还有其他解决方案吗？

Answer 1

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

img.fb {
     opacity: 0.7;   
}

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

这是jsfiddle