グレイスケールフィルター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

このフィルタは、ホバー上の一定の灰色にすべての非透明のコンテンツを変換します。あなたのイメージに白い背景がある場合は、まずそれをノックアウトする必要があります。フィルタの中に白い背景をノックアウトする方法がありますが、複雑です - オフラインで行う方が簡単です。

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