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

css3过滤器的一致呈现

1 个答案: