Question

我有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图标更暗。我认为唯一的方法是使用灰度百分比。还有其他解决方案吗？

Answer 1

您可以在fb图像上添加一类fb并设置

img.fb {
     opacity: 0.7;   
}

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

以下是jsfiddle

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

1 个答案: