Alternative zu Graustufenfilter CSS3

Question

Ich habe ein Menü erstellt, wo ich ein farbiges Logo in jedem Abschnitt habe. Ich habe diesen Abschnitten einen Graustufenfilter gegeben, wenn sie nicht im Schwebeflug sind, aber das Problem, wie said in here, ist, dass jedes Bild in einem anderen Grauton erscheint, was ich verstanden habe, ist das normale Verhalten dieses CSS-Filters.

Also ich bin auf der Suche nach einer ähnlichen CSS-Lösung, die es mir ermöglicht, alle diese Logos im gleichen Grauton zu haben, wenn nicht im Hover und sobald ich sie schwebe, gehen sie zurück zur ursprünglichen Farbe.

Dies ist mein Code, wenn sie nicht in Hover:

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

Und dies ist mein Code beim Hover:

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

ich Ihnen ein Bild zeige, so können Sie sehen, was ich rede .

Answer 1

Diese Filter werden alle nicht-transparenten Inhalt auf einen konstanten grau auf schweben konvertieren. Wenn Sie einen weißen Hintergrund in Ihrem Bild haben, müssen Sie es zuerst ausknocken. Es gibt eine Möglichkeit, einen weißen Hintergrund in einem Filter zu eliminieren, aber es ist kompliziert - einfacher, es offline zu tun.

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