替代灰度濾鏡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

回答

相關問題