css - svgファイルなしのFirefoxとOperaの明るさフィルター

Question

私の現在のプロジェクトでは、フィルターを使用 -webkit-filter: brightness(-20%);-moz-filter: brightness(-20%); しましたが、どういうわけか、このフィルターはfirefoxとoperaでは機能しません（私もoperaプレフィックスを持っています）。これを使用する方法を見つけましたが、明るさフィルターを svg コードに変換する必要があります。どうすればこれを行うことができますか？
私がしなければならないのは、暗い画像と、2x 画像を使用せずに通常の画像をホバーした小さなギャラリーです。

Answer 1

SVG フィルターを使用したい。各チャンネルで一定量だけ画像を暗くするフィルターの例は次のとおりです。

<filter id="darken">
<feComponentTransfer>
       <feFuncR type="linear" intercept="-0.2" slope="1"/>
       <feFuncG type="linear" intercept="-0.2" slope="1"/>
       <feFuncB type="linear" intercept="-0.2" slope="1"/>
   </feComponentTransfer>
</filter>

これにより、各カラー チャネルで画像が 20% 暗くなります。完全な jsfiddle