Question

我正在玩CSS3滤镜功能（模糊，对比，反转等），并注意到有一个opacity功能：

filter: opacity(0.5);
-webkit-filter: opacity(0.5);
-moz-filter: opacity(0.5);

虽然我们已经有了：

opacity: 0.5;

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

现在让我想知道，有什么不同吗？

修改

我没有问过旧的IE filter: alpha(opacity=50)，因为这是微软的实施。我问的是CSS3 filter vs CSS3 opacity？

Answer 1

@ bram-vanroy基本上已经发布了相同的问题。我以为this was the best answer。

过滤器：opacity（）与更完善的 opacity 属性类似；   区别在于，使用 filter：opacity（），某些浏览器提供了   硬件加速以获得更好的性能。负值不是   允许。

过滤器：opacity（）应用透明度。值为0％完全是   透明。值为100％会使输入保持不变。价值观   在0％和100％之间是效果的线性倍增。这是   等效于将输入图像样本乘以数量。如果   缺少“金额”参数，使用的值为100％。

Answer 2

谢谢@JoeRohney指出@ArmanNisch的答案，我将这个答案发布给以后从任何官方来源寻求答案的人。

基于official source (Mozilla documentations) about filter: opacity(value)：

注意：此功能类似于已建立的opacity 属性。 区别在于，某些浏览器使用过滤器来提供硬件加速以获得更好的性能。

CSS3：不透明度与滤镜不透明度？

2 个答案: