“不透明度”之间的区别是什么，和“filter：opacity（）”。 [英] What is the difference between "opacity" and "filter: opacity()"

问题描述

我们大多数人都知道简单的 opacity CSS规则，但最近我偶然发现了 filter c $ c> opacity（amount） as it value - 等等。但是两者之间的区别是什么？

Most of us know the simple opacity CSS rule, but recently I stumbled upon filter which can have opacity(amount) as it value - among other things. But what exactly is the difference between the two?

推荐答案

过滤器 CSS有一些不同的运行，即FireFox和MSIE。

filter in CSS had some different runs, namely for FireFox and MSIE.

在MSIE 5.5第7到第7， 过滤器 ，也称为 Alpha Filter 实际上使用了MSIE的 DX过滤器（不再支持）。然而，为了更加CSS2.1兼容，在IE8 MS介绍 -ms-filter 更改为 过滤器 。语法的不同之处在于值 rel =nofollow> -ms-filter 必须包含在引号中。最后，IE9使这个方法失效，因为IE10，它不再使用。

In MSIE 5.5 on through 7, filter, also known as Alpha Filter, actually makes use of MSIE's DX Filter (no longer supported). However, in order to be more CSS2.1 compliant, in IE8 MS introduced -ms-filter to replace filter. The syntax is different in that the value of -ms-filter must be encased in quotes. Eventually, IE9 brought deprecation to this method and as of IE10, it is no longer used.

如果您想要完全兼容旧版IE，则必须确保使用 过滤器 和 -ms-filter 必须非常具体。例如，以下操作在运行IE7 compat模式的IE8中不起作用：

Another interesting note here, if you're wanting full compatibility for older IE, then you must make sure use of filter and -ms-filter must be very specific. For example, the following does not work in IE8 running IE7 compat mode:

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

-ms-filter 必须必须 过滤器 。

-ms-filter must come before filter in order to get more out of older IE compatibility.Like so:

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

---

FireFox使用< a href =https://developer.mozilla.org/en-US/docs/Web/CSS/filter =nofollow> 过滤器 作为一个实验走了。我相信最初的想法是嘲笑什么IE正在使用Direct X引擎。甚至有一个浏览器特定的版本，因为有大多数浏览器一次。最终，HTML5 / CSS3宣布使用过滤器命名空间，现在有一个新的目的。

---

FireFox made use of filter as an experiment gone awry. I believe the original idea was to mock what IE was doing in using the Direct X engine. There was even a browser specific version, as there was for most browsers at one time. Eventually, HTML5/CSS3 announced use of the filter namespace and it now has a new purpose.

自CSS3开始， filter 现在有了全新的意义！ Firefox文档保持打开，如果他们计划扩展这一点，虽然我还没有看到它（但他们做崩溃JS，如果你的CSS不是它的喜欢现在！）。 Webkit（可能会在下次更新CSS3时成为标准）已开始实施 过滤器 到您几乎可以为您的网站 photoshop 的图片！

As of CSS3, filter now has a whole new meaning! Firefox docs stay open as if they plan to expand on this, though I've yet to see it (however they do crash JS if your CSS is not to its liking now!). Webkit (which will probably become standard in next update to CSS3) has started to implement filter to the point you can almost "photoshop" images for your site!

由于过滤器变化太多， opacity 将是首选方法，但是，正如你所看到的，跨浏览器兼容性意味着非常透彻。

Since filter is changing so much, opacity would be the preferred method to use, however, as you can see, to be completely cross-browser compatible means being very thorough.

浏览器特定替代项：

• -webkit-filter：filter（value）;


• -moz-filter：filter（value）;


• -o-filter：filter（value）;


• -ms-filter：progid：DXCLASS.Object.Attr（value）;

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

• 兼容 opacity ？


• 与更新的过滤器兼容？
  
  
  
  • 请注意，不要与旧版IE的过滤器相同
  
  
  • What's compatible with opacity?
  • What's compatible with the newer filter?
    • keep in mind, not the same as Older IE's filter

    这篇关于“不透明度”之间的区别是什么，和“filter：opacity（）”。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！