Question

我们大多数人都知道简单的opacity CSS规则，但最近我偶然发现filter可能有opacity(amount)的价值 - 以及其他内容。但这两者究竟有什么不同呢？

Answer 1

过滤器：opacity（）与更完善的 opacity 属性类似；差异是通过 filter：opacity（），一些浏览器提供   硬件加速以获得更好的性能。负值不是   允许。

过滤器：opacity（）应用透明度。   值为0％是完全透明的。值100％   输入不变。 0％到100％之间的值是   效果。这等效于将输入图像样本相乘   按数量。如果缺少“金额”参数，则值为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

我发现两者之间有些区别，尤其是在Chrome浏览器中。如果我们将CSS opacity属性设置为iframe标签，则在该框架内我们将无法单击该框架内的任何链接（我想这是对clickjacking攻击的一种保护） filter: opacity(0)允许我们单击任何链接。我不知道，也许这是Chrome开发人员的遗漏。

Answer 3

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将是首选的方法，但正如您所看到的那样，完全跨浏览器兼容意味着非常彻底。< / p>

浏览器特定的替代：

-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的过滤器

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

3 个答案:

另见：