google-chrome - 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