对于我当前的项目,我使用了过滤器 -webkit-filter: brightness(-20%);-moz-filter: brightness(-20%);
但是不知何故,这个过滤器在 firefox 和 opera 中不起作用(我也有 opera 前缀)。我发现了如何使用它,但我需要将亮度过滤器转换为 svg 代码。有什么想法我该怎么做?
我必须做的是一个小画廊,图像变暗,悬停时有普通图像,不使用 2x 图像。
问问题
6291 次
2 回答
12
您想使用 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
于 2012-10-10T01:58:03.967 回答
4
如果您需要更多跨浏览器的解决方案,您可以在未悬停时使图像半透明:
img {
opacity: .7;
}
img:hover {
opacity: 1;
}
当它们位于深色背景上时,这将产生使它们变暗的效果。
于 2012-10-10T02:09:16.213 回答