没有svg文件的Firefox和Opera中的亮度过滤器答案

【问题标题】：Brightness filter in firefox and opera without svg file没有svg文件的Firefox和Opera中的亮度过滤器
【发布时间】：2012-07-04 18:14:01
【问题描述】：

对于我当前的项目，我使用了过滤器-webkit-filter: brightness(-20%);-moz-filter: brightness(-20%); 但是不知何故，这个过滤器在 firefox 和opera 中不起作用（我也有opera 前缀）。我发现了如何使用它，但我需要将亮度过滤器转换为 svg 代码。有什么想法我该怎么做？
我要做的是一个小画廊，有变暗的图像，悬停时有普通图像，不使用 2x 图像。

【问题讨论】：

标签： css image html svg-filters

【解决方案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

【讨论】：

在 MDN 关于 css 过滤器的页面中，有一些 svg 后备示例。 developer.mozilla.org/en-US/docs/CSS/filter
谢谢你拯救我的一天:)

【解决方案2】：

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

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

当它们在深色背景上时，这将具有使它们变暗的效果。

【讨论】：