灰度滤镜 CSS3 的替代品答案

【问题标题】：Alternative to Grayscale filter CSS3灰度滤镜 CSS3 的替代品
【发布时间】：2018-02-18 17:40:33
【问题描述】：

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

所以我正在寻找一个类似的 CSS 解决方案，它允许我在没有悬停时让所有这些徽标处于相同的灰色阴影中，一旦我将它们悬停，它们就会恢复到原始颜色。

这是我不悬停时的代码：

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

这是我悬停时的代码：

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

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

【问题讨论】：

标签： html css grayscale css-filters

【解决方案1】：

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

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

<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>

【讨论】：