CSS3:不透明度与过滤器不透明度? [英] CSS3: opacity vs filter opacity?

问题描述

我在玩CSS3过滤器功能(模糊，对比度，反转等)，并注意到有一个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);

虽然我们已经拥有:

opacity: 0.5;

如果我们将它们都应用于HTML元素，则似乎会产生双重效果！

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?

我不是在问旧版IE filter: alpha(opacity=50)，因为这是Microsoft的实现.我在问CSS3 filter与CSS3 opacity?

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?

推荐答案

感谢@JoeRohney指出@ArmanNisch的答案，我将其发布为所有人从官方渠道中寻求答案的参考.

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.

基于有关以下内容的官方来源(Mozilla文档) 过滤器:不透明度(值) :

注意:此功能类似于已建立的opacity 财产. 区别在于，使用过滤器后，某些浏览器会提供 硬件加速以获得更好的性能.

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.

这篇关于CSS3:不透明度与过滤器不透明度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！