"不透明度"和"过滤器:不透明度()"之间的区别是什么？

Question

我们大多数人都知道简单的opacityCSS规则,但最近我偶然发现了filter它可以具有的opacity(amount)价值 - 除其他外.但这两者究竟有什么区别？

Answer 1

filter: opacity()类似于更成熟的opacity属性；的区别是，随着过滤器：不透明度（） ，一些浏览器提供更好的性能，硬件加速。不允许使用负值。

过滤器：opacity()应用透明度。0% 的值是完全透明的。值为 100% 时输入保持不变。0% 到 100% 之间的值是效果的线性乘数。这相当于将输入图像样本乘以数量。如果缺少“amount”参数，则使用 100% 的值。

来源：https : //css-tricks.com/almanac/properties/f/filter/

/*
* -----------
* filter: opacity([ <number> or <percentage> ])
* -----------
*/

.filter-opacity {
  filter: opacity(0.3);
  height: 5rem;
  width: 5rem;
  background-color: mediumvioletred;
}

/*
* -----------
* standard opacity
* -----------
*/

.just-opacity {
  opacity: 0.3;
  height: 5rem;
  width: 5rem;
  background-color: lawngreen;
}

<div class="filter-opacity">
  filter-opacity
</div>

<div class="just-opacity">
  just-opacity
</div>

Answer 2

filterCSS 中有一些不同的运行方式，即 FireFox 和 MSIE。

在 MSIE 5.5 到 7 中，filter也称为Alpha Filter，实际上利用了 MSIE 的DX Filter（不再支持）。然而，为了更加兼容 CSS2.1，MS 在 IE8 中引入-ms-filter了替换 filter. 语法的不同之处在于的值-ms-filter必须用引号引起来。最终，IE9 弃用了此方法，从 IE10 开始，不再使用此方法。

这里还有一个有趣的注意事项，如果您想要完全兼容旧版 IE，那么您必须确保使用filter和-ms-filter必须非常具体。例如，以下内容在运行 IE7 兼容模式的 IE8 中不起作用：

element {
    filter: alpha(opacity=50);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

-ms-filter 必须先行filter才能充分利用旧版 IE 兼容性。如下所示：

element {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
}

FireFox 曾被用作filter一个失败的实验。我相信最初的想法是模拟 IE 使用 Direct X 引擎所做的事情。甚至还有一个特定于浏览器的版本，就像大多数浏览器曾经有的那样。最终，HTML5/CSS3 宣布使用命名空间filter，现在它有了新的用途。

自 CSS3 起，filter现在有了全新的含义！Firefox 文档保持开放，就好像他们计划对此进行扩展，尽管我还没有看到它（但是，如果你的 CSS 现在不符合他们的喜好，他们确实会使 JS 崩溃！）。Webkit（可能会在 CSS3 的下一次更新中成为标准）已经开始实施，filter您几乎可以为您的网站“ Photoshop ”图像！

由于过滤器变化如此之大，因此opacity将是首选使用方法，但是，正如您所看到的，完全跨浏览器兼容意味着非常彻底。

浏览器特定的替代方案：

• -webkit-filter：过滤器（值）；
• -moz-filter：过滤器（值）；
• -o-filter：过滤器（值）；
• -ms-filter: "progid:DXCLASS.Object.Attr(value)";

也可以看看：

• 与什么兼容opacity？
• 什么与较新的兼容filter？
  • 请记住，与旧版 IE 的过滤器不同