CSS3: 透明度 vs 滤镜透明度？

Question

我正在使用CSS3滤镜函数（模糊、对比度、反转等），并注意到有一个opacity函数：

filter: opacity(0.5);
-webkit-filter: opacity(0.5);
-moz-filter: opacity(0.5);

尽管我们已经有:

opacity: 0.5;

如果我们同时为一个 HTML 元素应用这两个属性，似乎它会产生双倍的效果！这让我想知道，它们有什么区别吗？

编辑：我不是在问旧版 IE 的 filter: alpha(opacity=50)，因为那是微软的实现。我在问 CSS3 中的 filter 和 opacity 有什么区别？

- evilReiko

---

这里有一个类似的帖子。 - Jimmy Ko

@JimmyKo 感谢您指出那篇帖子。该帖子中所选的答案实际上并没有回答问题。 - evilReiko

那么你是在询问两个属性之间实现的差异吗？由于w3c只提供规范而不限制实现，因此很难回答... - Jimmy Ko

Answer 1

@bram-vanroy已经发布了同样的问题。我认为这个回答是最好的。

filter: opacity()类似于更成熟的opacity属性;不同之处在于，使用filter: opacity()时，一些浏览器会提供硬件加速以获得更好的性能。不允许使用负值。

filter: opacity()应用透明度。0%的值完全透明。100%的值不改变输入的内容。0%到100%之间的值是效果的线性乘数。这相当于将输入图像的样本乘以“amount”。如果缺少“amount”参数，则使用100%的值。

- Joe Rhoney

Answer 2

感谢@JoeRohney指出了@ArmanNisch的回答，我会发布这个答案供任何需要官方来源的人参考。

根据官方来源（Mozilla文档）关于filter: opacity(value)：

注意：此函数类似于更为常见的opacity属性。不同之处在于，使用过滤器时，一些浏览器提供硬件加速以获得更好的性能。

- evilReiko