替代灰度滤镜CSS3

我创建了一个菜单，其中每个部分都有一个彩色标志。当他们没有悬停时，我已经给出了这个部分的灰度过滤器，但是问题（如said in here）是每个图像都以不同的灰色阴影出现，我知道这是CSS过滤器的正常行为。替代灰度滤镜CSS3

所以我正在寻找一个类似的CSS解决方案，它允许我在没有悬停的情况下使所有这些徽标处于相同的灰色阴影中，并且一旦我将它们悬停后，它们就会回到原来的颜色。

这是我的代码时不悬停：

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

这是我的代码时，悬停：

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

我展示你的照片，所以你可以看到我在说什么。

来源

2017-09-10 Héctor de Prada González

此过滤器将所有非透明内容转换为悬停恒定灰色。如果你的图像中有白色背景，那么你需要首先敲掉它。有一种方法可以在滤波器内敲出白色背景，但它很复杂 - 更容易脱机。

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

来源

2017-09-22 21:14:21

替代灰度滤镜CSS3

回答

相关问题