Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS3: opacity vs filter opacity?

Tags:

css

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?

like image 330
evilReiko Avatar asked Jun 30 '16 09:06

evilReiko


People also ask

What is opacity filter?

Filter opacity() The opacity() function changes how visible elements are. The lower the opacity, the less visible an image becomes.

What is the difference between opacity and transparency in CSS?

Opacity is a measure of how opaque an item is and transparency is a measure of how transparent it appears. Both work nearly the same way but at 100% transparent, the element will be completely invisible, while with the opacity set to 100% it be fully visible.

What opacity means in CSS?

Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.


2 Answers

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

like image 102
Joe Rhoney Avatar answered Sep 30 '22 13:09

Joe Rhoney


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.

like image 40
evilReiko Avatar answered Sep 30 '22 13:09

evilReiko