css3 – “opacity”和“filter:opacity()”之间有什么区别?

前端之家收集整理的这篇文章主要介绍了css3 – “opacity”和“filter:opacity()”之间有什么区别?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我们大多数人都知道简单的不透明度CSS规则,但是最近我偶然发现过滤器可以具有不透明度(量),因为它的价值.但两者之间有什么区别呢?

解决方法

CSS中的过滤器有一些不同的运行,即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开始,它已经不复存在了.@H_404_7@

另一个有趣的注意事项,如果您想要较旧的IE完全兼容,那么您必须确保使用filter-ms-filter必须非常具体.例如,以下不能在IE8运行IE7兼容模式下运行:@H_404_7@

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

-ms-filter必须在filter之前才能获得更多的旧版IE兼容性.所以:@H_404_7@

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

FireFox使用filter作为实验失败.我相信原来的想法是模拟IE在使用Direct X引擎时所做的工作.甚至有一个浏览器特定的版本,因为大多数浏览器一次.最终HTML5 / CSS3宣布使用过滤器命名空间,现在有了一个新的目的.@H_404_7@

从CSS3起,filter现在有了全新的意义! Firefox文档保持打开状态,就像他们打算扩展一样,虽然我还没有看到它(但是如果您的CSS现在不符合自己的喜好,那么它们会崩溃JS). Webkit(可能会成为下一次更新CSS3标准)已经开始实施filter到您几乎可以为您的网站“photoshop”图像的点!@H_404_7@

由于过滤器变化太大,不透明度将是首选的使用方法,但是,如您所见,完全跨浏览器兼容意味着非常彻底.@H_404_7@

特定浏览器:@H_404_7@

-webkit-filter:filter(value);
-moz-filter:filter(value);
> -o-filter:filter(value);
> -ms-filter:“progid:DXCLASS.Object.Attr(value)”;@H_404_7@

也可以看看:@H_404_7@

> What’s compatible with opacity?
> What’s compatible with the newer filter?@H_404_7@

请记住,与旧版IE的过滤器不一样@H_404_7@

原文链接:https://www.f2er.com/css/214678.html

猜你在找的CSS相关文章