opacity透明度滤镜的IE兼容解决方法-css教程-PHP中文网

首页

web前端

css教程

opacity透明度滤镜的IE兼容解决方法

php中世界最好的语言

Mar 22, 2018 pm 02:47 PM

ie透明度

这次给大家带来opacity透明度滤镜的IE兼容解决方法，使用opacity透明度滤镜的注意事项有哪些，下面就是实战案例，一起来看一下。

CSS3的透明度属性opacity想必大家都已经用的无处不在了。而对于不支持CSS3的浏览器如何进行透明处理，保持浏览器效果的一致，这个估计谁都会写，但是涉及到filter的具体语法含义和各版本写法的不同区别，很多人都搞不准确，我曾经问过许多群里的大牛，说的都不是很准确，网上的说法就更五花八门了。今天呢，主要是重新温习一下这个属性，并实际测试来说明正确的写法，和IE各版本的支持度和书写区别。

首先，Opacity属性用来设置一个元素的透明度，取值范围是0~1之间，不可为负值。opacity取值为1是完全不透明，取值为0是完全透明，视觉上看不见。关于浏览器对opacity属性的兼容性请继续往下看：

从Firefox3.5+不再支持私有属性-moz-opacity了，在Mozilla 1.7 (Firefox 0.9)之前FF都是使用这个私有属性的，Firefox 0.9-Firefox3同时支持-moz-opacity和opacity这两个属性，现在回想起刚入职场不久那时候，正好是Firefox升级到3.5之后，一些做好的页面透明效果突然没有了，如今已经CSS3铺天盖地，概叹时光荏苒啊。

IE9+才开始支持CSS3 opacity，而对IE6-IE8我们习惯使用filter滤镜属性来进行实现。IE4-IE9都支持滤镜写法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).

IE8又引入了特殊的-ms-filter，IE认为这种写法是对旧写法的一次更正，更符合规范，这个写法的属性值只是多了一对引号，效果同前。不过，这种写法的寿命也不长，到IE10对filter与-ms-filter都已经不再支持。

Safari 1.2之前的版本，是基于khtml的浏览器内核，1.2版发布后，不再支持-khtml-opacity的写法，-khtml-opacity也随之成为历史。

Konqueror从未支持过-khtml-opacity，从4.0版本开始已经支持opacity。

除IE外，目前主流浏览器 Opera 9.0+，Safari 1.2(WebKit 125) +，chrome等等都支持opacity这个透明度属性。

IE 从4.0版开始，就提供了一些内置的多媒体滤镜特效，具体的使用方法是：

语法：

filter : filter

参数：

filter : 　要使用的滤镜效果。多个滤镜之间用空格隔开。

说明：

1、设置或检索对象所应用的滤镜效果。

2、要使用该属性，对象必须具有height，width，position三个属性中的一个。

3、滤镜的机制是可扩展的。可以开发和使用第三方滤镜。

4、该属性在MAC平台上不可用。

5、对应的脚本特性为filter。

IE4.0以上版本，支持以下14种滤镜：

①、Alpha 让HTML元件呈现出透明的渐进效果

②、Blur 让HTML元件产生风吹模糊的效果

③、Chroma 让图像中的某一颜色变成透明色

④、DropShadow 让HTML元件有一个下落式的阴影

⑤、FlipH 让HTML元件水平翻转

⑥、FlipV 让HTML元件垂直翻转

⑦、Glow 在元件的周围产生光晕而模糊的效果

⑧、Gray 把一个彩色的图片变成黑白色

⑨、Invert 产生图片的照片底片的效果

⑩、Light 在HTML元件上放置一个光影

⑪、Mask 利用另一个HTML元件在另一个元件上产生图像的遮罩

⑫、Shadow 产生一个比较立体的阴影

⑬、Wave 让HTML元件产生水平或是垂直方向上的波浪变形

⑭、XRay 产生HTML元件的轮廓，就像是照X光一样

Alpha 滤镜参数详解

①、Opacity 不透明的程度，百分比。从0到100，0表是完全透明，100表示完全不透明。

②、FinishOpacity 这是一个同Opacity一起使用的选择性的参数，当同时Opacity和FinishOpacity时，可以制作出透明渐进的效果，比较酷。从0到100，0表是完全透明，100表示完全不透明。

③、Style 当同时设定了Opacity和finishOpacity产生透明渐进时，它主要是用赤指定渐进的显示形状。 0：没有渐进；1：直线渐进；2：圆形渐进；3：矩形辐射。

④、StartX 渐进开始的 X 坐标值

⑤、StartY 渐进开始的 Y 坐标值

⑥、FinishX 渐进结束的 X 坐标值

⑦、FinishY 渐进结束的 Y 坐标值

下面通过一个例子来测试filter和opacity的兼容性：

Html代码

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=utf-8 />  
<title>JS Bin</title>  
</head>  
<body>  
  <p class="transparent_class">测试透明度</p>  
</body>  
</html>

注意：测试不要忘了写DOCTYPE，否则会偏离真实效果。

对应CSS代码：

.transparent_class {  
    /* Required for IE 5, 6, 7 */  
    /* ...or something to trigger hasLayout, like zoom: 1; */  
    width:300px;  
    height:300px;  
    line-height:300px;  
    text-align:center;  
    background:#000;  
    color:#fff;  
    /* older safari/Chrome browsers */  
    -webkit-opacity: 0.5;  
    /* Netscape and Older than Firefox 0.9 */  
    -moz-opacity: 0.5;  
    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/  
    -khtml-opacity: 0.5;  
    /* IE9 + etc...modern browsers */  
    opacity: .5;  
    /* IE 4-9 */  
    filter:alpha(opacity=50);  
    /*This works in IE 8 & 9 too*/  
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  
    /*IE4-IE9*/  
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);  
}

使用中，我们可以根据要适配的浏览器/版本，从上面选择自己需要的代码行。如果要全面支持所有浏览器，至少需要有关opacity或filter的前5句。需要声明的是，如果你要同时使用filter和-ms-filter，请将-ms-filter写在filter的前面。原文描述如下：

If you want opacity to also work in IE8′s emulating IE7 mode, the order should be:

-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // first  
filter: alpha(opacity=50); // second

If you don’t use this order, IE8 emulating IE7 doesn’t apply the opacity, although IE8 and IE7 native do.

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

用transparent做出三角形

CSS3的浏览器兼容问题

HTML5+CSS3加载进度条与下载进度条实现

以上是opacity透明度滤镜的IE兼容解决方法的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

Internet Explorer 打开 Edge：如何停止 MS Edge 重定向Apr 14, 2023 pm 06:13 PM

长期以来，InternetExplorer的失宠一直不是秘密，但随着Windows11的到来，现实开始了。Edge将来不再有时取代IE，它现在是微软最新操作系统中的默认浏览器。目前，您仍然可以在Windows11中启用InternetExplorer。但是，IE11（最新版本）已经有了一个正式的退役日期，即2022年6月15日，时间在流逝。考虑到这一点，您可能已经注意到InternetExplorer有时会打开Edge，而您可能不喜欢它。那么为什么会这样呢？在

win11无法使用ie11浏览器怎么办？(win11用不了ie浏览器)Feb 10, 2024 am 10:30 AM

越来越多的用户开始升级win11系统，由于每个用户的使用习惯不同，还是有不少用户在使用ie11浏览器，那么win11系统用不了ie浏览器，该怎么办呢？windows11还支持ie11吗？下面就来看看解决办法。win11无法使用ie11浏览器的解决方法1、首先右键开始菜单，选择“命令提示符（管理员）”打开。2、打开之后，直接输入“Netshwinsockreset”，回车确定。3、确定之后再输入“netshadvfirewallreset&rdqu

教你win10任务栏设置透明度的方法Jul 10, 2023 pm 12:37 PM

win10系统有许多比较新颖的功能，有小伙伴想要让自己的win10系统更加具有个性化，因此想设置任务栏透明度看起来更加酷炫些。那么win10任务栏如何设置透明度呢？下面小编就教下大家win10任务栏设置透明度的方法。具体的方法如下：1、打开电脑，鼠标移动到任务栏，然后鼠标右键任务栏，在窗口找到“任务栏设置”并且点开。2、点开“任务栏设置”窗口后，找到“颜色”选项，点开，在“颜色”设置界面可以设置大家所喜欢的得任务栏颜色，大家可以选择Windows颜色也可以自定义颜色，选好颜色后找到下面的“透明效

Win10打开IE自动跳转到Edge怎么取消_IE浏览器页面自动跳转的解决办法Mar 20, 2024 pm 09:21 PM

近期不少的win10用户们在使用电脑浏览器的时候发现自己的ie浏览器总是自动的跳转到edge浏览器，那么win10打开ie自动跳转edge怎么关闭?。下面就让本站来为用户们来仔细的介绍一下win10打开ie自动跳转edge关闭方法吧。1、我们登录edge浏览器，点击右上角...，找下拉的设置选项。2、我们进入设置后，在左侧栏点击默认浏览器。3、最后我们在兼容性中，勾选不允许IE模式下重新加载网站，重启ie浏览器即可。

CSS属性实现透明度渐变效果的方法Nov 18, 2023 pm 05:28 PM

CSS属性实现透明度渐变效果的方法，需要具体代码示例在网页设计中，透明度渐变效果可以为页面增添一种柔和而美观的过渡效果。通过CSS属性的设置，我们可以轻松实现不同元素在透明度上的过渡效果。今天我们就来介绍一些常见的方法和具体的代码示例。使用opacity属性Opacity属性可以设置元素的透明度，取值范围从0到1，0表示完全透明，1表示完全不透明。我们可以通

ie快捷方式无法删除如何解决Jan 29, 2024 pm 04:48 PM

ie快捷方式无法删除的解决办法：1、权限问题；2、快捷方式损坏；3、软件冲突；4、注册表问题；5、恶意软件；6、系统问题；7、重新安装IE；8、使用第三方工具；9、检查快捷方式的目标路径；10、考虑其他因素；11、咨询专业人士。详细介绍：1、权限问题，右键点击快捷方式，选择“属性”，在“安全”选项卡中，确保有足够的权限删除该快捷方式，如果没有，可以尝试以管理员身份运行等等。

一个时代的结束：Internet Explorer 11 已退役，这是你需要知道的Apr 20, 2023 pm 06:52 PM

2022年6月15日是Microsoft结束对InternetExplorer11(IE11)的支持并关闭其旧版浏览器章节的日子。一段时间以来，该公司一直在提醒用户注意这一生命周期结束日期，并呼吁他们计划迁移到MicrosoftEdge。Microsoft将IE11与Windows8.1捆绑在一起，作为Windows的现代默认Web浏览器。尽管它从未达到Chrome的（当前）高度，但它是2014年使用量第二大的桌面浏览器，仅次于IE8。当然，随着20

PPT怎么设置图片透明度Mar 20, 2024 pm 11:10 PM

我们平时在制作ppt的时候可以给图片穿插到里边，但是PPT怎么设置图片透明度这个问题对于一些刚学的小伙伴们还是不知道怎么实现，那么今天我就来教大家具体的操作步骤，具体步骤如下图。1.首先，在电脑上打开并且新建一个PPT文档，（如下图所示）。2.接下来，在上方工具栏中选择【插入】-【形状】，选择矩形并在空白画布上画出，（如下图红色圈出部分和红色箭头指向所示）。3.然后，在上方工具栏中选择【填充】，（如下图红色圈出部分和红色箭头指向所示）。4.接下来，在【填充】对话框中选择【更多设置】，（如下图红色

See all articles