CSS3: opacity vs filter opacity?

问题

I was playing with the CSS3 filter functions (blur, contrast, invert, etc.), and noticed there is an opacity function:

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

While we already have:

opacity: 0.5;

If we apply both of them for a HTML element, it seems like it's getting double effect!

Now that makes me wonder, is there any difference?

EDIT:

I'm not asking about the old IE filter: alpha(opacity=50) as that is Microsoft's implementation. I'm asking about the CSS3 filter vs CSS3 opacity?

回答1:

@bram-vanroy posted this same question already, basically. I thought 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.

回答2:

Thank you @JoeRohney to point out @ArmanNisch's answer, I'm posting this answer as future reference to anyone looking for an answer from official source.

Based on official source (Mozilla documentations) about filter: opacity(value):

Note: This function is similar to the more established opacity property. The difference is that with filters, some browsers provide hardware acceleration for better performance.

来源：https://stackoverflow.com/questions/38119234/css3-opacity-vs-filter-opacity