firefox和opera中的亮度过滤器没有svg文件

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％。 Full jsfiddle

Answer 2

如果您需要更多跨浏览器解决方案，可以在不悬停图像时使图像保持半透明：

img {
    opacity: .7;
}
img:hover {
    opacity: 1;
}

当它们在黑暗的背景下时会产生变暗的效果。