6

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?

evilReiko
  • 19,501
  • 24
  • 86
  • 102
  • 1
    There is a similar [post](http://stackoverflow.com/questions/20310219/what-is-the-difference-between-opacity-and-filter-opacity). – Jimmy Ko Jun 30 '16 at 09:38
  • @JimmyKo Thanks for pointing that post. The selected answer in that post doesn't actually answer the question. – evilReiko Jun 30 '16 at 09:46
  • So are you asking for the difference of implementation between two properties? As w3c only provide the specification but not restricted the implementation. It is quite difficult to answer... – Jimmy Ko Jun 30 '16 at 09:58

2 Answers2

5

@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.

Joe Rhoney
  • 353
  • 5
  • 14
4

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.

evilReiko
  • 19,501
  • 24
  • 86
  • 102