"opacity"和"filter: opacity()"有什么区别？

Question

"opacity"和"filter: opacity()"有什么区别？

csstransparencyopacity

31

大多数人都知道简单的 opacity CSS 规则，但最近我发现了 filter ，它可以将 opacity(amount) 作为其值 - 其他方面也有用途。但两者之间到底有什么区别呢？

- Bram Vanroy

3个回答

4

我发现它们之间存在一些差异，尤其是在Chrome浏览器中。如果我们将CSS的opacity属性设置为iframe标签，则我们将无法单击该帧内的任何链接（我猜这是防止clickjacking攻击的保护措施），而filter: opacity(0)则允许我们单击任何链接。我不知道，也许这是Chrome开发人员的疏忽。

- Hit-or-miss

-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的value必须用引号括起来。最终，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"图像！

由于filter正在发生如此多的变化，opacity将是使用的首选方法，然而，正如您所看到的，要完全跨浏览器兼容意味着非常彻底。

浏览器特定的替代方案：

-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-ms-filter: "progid:DXCLASS.Object.Attr(value)";

参见：

什么与opacity兼容？
什么与较新的filter兼容？
- 请注意，与旧版IE的filter不同

- SpYk3HH

3

我知道，这篇帖子已经没有人关注了，但是为什么这个答案被标记为正确的？你只是描述了过滤器和-ms-filter（以及其他特定于浏览器的过滤器），并没有回答问题：使用例如opacity:0.2和filter:opacity(20%)之间有什么区别？ - Matthias Burger

@MatthiasBurger：“...过滤器变化如此之大，不透明度将是首选的使用方法...”因为OP从中得到了完全想要的结果。 - SpYk3HH

因此，总的来说...除了为了兼容IE <6（或IE <9，因为在这两者之间支持“部分”）之外，没有理由使用filter而不是opacity。 - AdrienK

@AdrienK 是的，基本上是这样。filter只适用于IE 5-7，而-ms-filter-适用于IE 9以下版本。对于其他所有浏览器，只需使用opacity即可。我鼓励更多的“您的浏览器不兼容，请升级”类型的页面，针对任何IE<=9的情况。 - SpYk3HH

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Arman Nisch · Accepted Answer

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>