CSS3: opacity vs filter opacity?

css, opacity

Solution

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.

Problem

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`?

Original source

Related problems