css3过滤器的一致渲染

Question

我正要在我的网站上做一些花哨的 css3 过滤器，但遗憾的是浏览器显示的结果完全不同。

因为过滤器目前仅适用于 webkit 浏览器 (source)，所以到目前为止我只尝试了 -webkit-filter。

问题是，Safari（在 iOS 上测试）将 brightness(0) 解释为默认值，而 brightness(1) 显示元素全亮。 Chrome 的默认值为 1。

有没有办法为 webkit 浏览器实现一致的亮度？

请参阅此 jsFiddle 以获取示例：http://jsfiddle.net/4SMDf/1/

提前致谢， 麦克法兰

Answer 1

您可以使用 SVG 过滤器来做到这一点。

这是一个例子：

<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="brightness">
    <feComponentTransfer>
      <feFuncR type="linear" slope="[amount]"/>
      <feFuncG type="linear" slope="[amount]"/>
      <feFuncB type="linear" slope="[amount]"/>
    </feComponentTransfer>
  </filter>
</svg>

在此处查看亮度（数量）部分：https://developer.mozilla.org/en-US/docs/CSS/filter