客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
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> <div class="transparent_class">测试透明度</div> </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. 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持极客世界。 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期
今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要
我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多
今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不
电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很
我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法
今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win
今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎
请发表评论