CSS3：不透明度与过滤不透明度？答案

【问题标题】：CSS3: opacity vs filter opacity?CSS3：不透明度与过滤不透明度？
【发布时间】：2016-11-02 07:41:41
【问题描述】：

我在玩 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)，因为那是 Microsoft 的实现。我在问 CSS3 filter vs CSS3 opacity？

【问题讨论】：

有一个类似的post。
@JimmyKo 感谢您指出该帖子。该帖子中选择的答案实际上并未回答问题。
那么您是在问两个属性之间的实现差异吗？由于 w3c 仅提供规范，但不限制实现。很难回答……

标签： css opacity

【解决方案1】：

感谢@JoeRohney 指出@ArmanNisch 的答案，我将此答案发布为将来向任何寻求官方来源答案的人的参考。

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

注意：这个功能类似于比较成熟的opacity 财产。 不同之处在于过滤器，一些浏览器提供硬件加速以获得更好的性能。

【讨论】：

【解决方案2】：

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

filter: opacity() 类似于更成熟的 opacity 属性；不同的是，使用 filter: opacity()，一些浏览器提供硬件加速以获得更好的性能。负值不是允许。

filter: opacity() 应用透明度。 0% 的值是完全透明。值 100% 使输入保持不变。价值观 0% 到 100% 之间是效果的线性乘数。这是相当于将输入图像样本乘以数量。如果缺少“金额”参数，使用 100% 的值。

【讨论】：