“不透明度”和“过滤器：不透明度（）”之间的区别是什么？

Question

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

Answer 1

CSS中的filter有一些不同的运行，即FireFox和MSIE。

---

在MSIE 5.5至7中，filter，也称为Alpha Filter，实际上使用了MSIE的DX Filter（no longer supported）。但是，为了更符合CSS2.1，在IE8 MS中引入了-ms-filter来取代filter。语法不同，-ms-filter的值必须用引号括起来。最终，IE9对此方法提出了弃用，从IE10开始，它已不再使用。

---

另一个有趣的注意事项，如果你想要对旧的IE完全兼容，那么你必须确保使用filter和-ms-filter必须非常具体。例如，以下在运行IE7 compat模式的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：filter（value）;
• -moz-filter：filter（value）;
• -o-filter：filter（value）;
• -ms-filter：“progid：DXCLASS.Object.Attr（value）”;

---

也可以看看：

• What's compatible with opacity?
• What's compatible with the newer filter? 请记住，与旧版IE的过滤器不同

Answer 2

filter：opacity（）类似于更成熟的opacity属性;不同之处在于使用filter：opacity（），一些浏览器提供硬件加速以获得更好的性能。不允许使用负值。

filter：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 3

我发现它们之间存在一些差异，尤其是在Chrome浏览器中。如果我们将CSS opacity属性设置为iframe标记，那么我们将无法单击此框架内的任何链接（我猜，这是对clickjacking攻击的保护），而filter: opacity(0)允许我们单击任何链接。我不知道，也许这是Chrome开发者方面的遗漏。