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
?
Filter opacity() The opacity() function changes how visible elements are. The lower the opacity, the less visible an image becomes.
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.
Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.
@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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With