CSS3 : opacity vs filter opacity?

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)，因为那是 Microsoft 的实现。我问的是 CSS3 filter 与 CSS3 opacity？

Answer 1

@bram-vanroy 基本上已经发布了同样的问题。我以为this was the best answer .

filter: opacity() is similar to the more established opacity property; the difference is that with filter: opacity(), some browsers provide hardware acceleration for better performance. Negative values are not allowed.

filter: opacity() applies transparency. A value of 0% is completely transparent. A value of 100% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount. If the “amount” parameter is missing, a value of 100% is used.