替代灰度滤镜CSS3

Question

我创建了一个菜单，每个部分都有一个彩色徽标。我已经给出了这些部分灰度过滤器，当它们不在悬停时，但问题，如said in here，每个图像以不同的灰色阴影出现，我已经理解这是这个CSS过滤器的正常行为。

所以我正在寻找一个类似的CSS解决方案，允许我在没有悬停时将所有这些徽标都设置为相同的灰色，一旦我将它们悬停在原来的颜色上。

这是我不在悬停时的代码：

.li.logo-menu-seccion {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

这是我悬停时的代码：

-webkit-filter: grayscale(0);
filter: grayscale(0);

我正在给你看一张照片，这样你就能看到我在说什么。

Answer 1

此过滤器会在悬停时将所有非透明内容转换为常量灰色。如果图像中有白色背景，则需要先将其敲掉。有一种方法可以在过滤器内部清除白色背景，但它很复杂 - 离线更容易。

＆＃13;

＆＃13;

#box-container:hover  {
 filter: url(#constantgrey);
}

＆＃13;

<div id="box-container">

<svg width="200px" height="200px">
<rect fill="#FF0000" x="10" y="10" width="30" height="30"/>
<rect fill="#FFFF00" x="60" y="10" width="30" height="30"/>
<rect fill="#000070" x="110" y="10" width="30" height="30"/>
</svg>

</div>


<svg>
<defs>
 <filter id="constantgrey">
 <feColorMatrix type="matrix" values="0 0 0 0 .3
                                      0 0 0 0 .3
                                      0 0 0 0 .3
                                      0 0 0 1 0"/>
 </filter>
</defs>
</svg>

＆＃13;

＆＃13;

＆＃13;