`

Opacity多浏览器透明度兼容处理

阅读更多
用来设定元素透明度的 Opacity 是CSS 3里的一个属性。当然现在还只有少部分浏览器支持。

不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari:

IE: filter:alpha(opacity)
Mozilla: -moz-opacity
Safari: -khtml-opacity
很不幸的是,你没看见Opera,老版本的Opera并没有什么私有属性可以代替opacity。(新版Opera已经支持opacity)

所以以前用CSS设定一个元素半透明的话,可能会这样写:
.opacity{
 filter:alpha(opacity=50);       /* IE */
 -moz-opacity:0.5;              /* 老版Mozilla */
 -khtml-opacity:0.5;              /* 老版Safari */
 opacity: 0.5;           /* 支持opacity的浏览器*/
}

用javascript来设定一个元素为半透明:
.object.filter = "alpha(opacity=" + opacity + ")";  /* IE */
.object.MozOpacity = (opacity / 100);    /* 老版Mozilla */
object.KhtmlOpacity = (opacity / 100);    /* 老版Safari */
object.opacity = (opacity / 100);    /* 支持opacity的浏览器*/

转自:http://www.cnblogs.com/netwenchao/archive/2009/07/16/1525077.html
分享到:
评论

相关推荐

    CSS3中的Opacity多浏览器透明度兼容性问题

    用来设定元素透明度的 Opacity 是CSS 3里的一个属性。当然现在还只有少部分浏览器支持。不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari: IE: filter:alpha(opacity) Mozilla: -moz-...

    多个浏览器透明度设置

    各个浏览器透明度设置 filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8;

    js和jQuery设置Opacity半透明 兼容IE6

    为了兼容IE与其他浏览器对透明度的设置,我们需要对以上两种样式分别进行设置。下面是一段示例代码: 复制代码 代码如下:var alpha = 30; //透明度值变量 var oDiv = document.getElementById(‘di

    详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法

    CSS3的透明度属性opacity想必大家都已经用...而对于不支持CSS3的浏览器如何进行透明处理,保持浏览器效果的一致,本篇文章主要介绍了详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法,有兴趣的可以了解一下。

    css 透明度的设置兼容所有浏览器

    [code] .transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5; opacity: 0.5;} [/code] UPDATE: I wanted to pull this post out of the archives and update it a bit because it ...

    CSS3教程(8):CSS3透明度指南

    “opacity”声明用来设置一个元素的透明度:层、文字、图片等…一个opacity的值为1的元素是完全不透明的,反之,值为0是完全透明的,看不见的。1到0之间的任何值都表示该元素的透明程度。 浏览器兼容性 opacity是...

    原生js和jquery中有关透明度设置的相关问题

    在日常开发的网站中,常常会用到设置透明度问题,最简单的就是图片的... 2 原生js设置透明度 为了兼容IE与其他浏览器对透明度的设置,我们需要对以上两种样式分别进行设置; 代码如下: var alpha = 30; //透明度值变量

    兼容主流浏览器的CSS透明代码(必看篇)

    透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码。 CSS Code复制内容到剪贴板 transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; ...

    CSS样式设置元素的透明度以50%为例

    下面的代码兼容各种浏览器,用于定义对象的透明度,本范例设置透明度为50% 复制代码代码如下: .transparent_class { /* http://www.sharejs.com/codes/ */ filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-...

    jQuery仿京东图片变亮变暗效果.zip

    jQuery仿京东图片变亮变暗效果,鼠标悬停图片之后该图片变亮,其他图片变暗。移开鼠标所有图片变亮。...3、js代码中,opacity参数调整透明度,第三个参数调整速度 animate(imgs[i],{left:0,opacity:1},100);

    仿jquery animate

    5:支持opacity透明度变化; 6:支持+= -= *= /=操作; 7:支持单位操作(px, %); 2:使用说明 jelle(A).animate(B, C, D); A:需要执行动画的dom元素ID; B:动画的主要参数传递{key,val,key2,val2};比如{width:'100px...

    CSS和CSS3思维导图(xmind版)

    opacity(不透明度)  box-sizing(控制盒模型的组成模式):指定两个boxes接壤 resize(元素缩放):指定一个div元素,允许用户调整大小 outline(外边框) background-origin(指定背景图片从哪里开始显示) background-...

    jQuery图片背景墙聚光灯效果代码.zip

    jQuery图片背景墙聚光灯效果代码,鼠标悬停在某张图片上时,该图片变亮,其他图片变暗。兼容主流浏览器,php中文网推荐下载! ...4、修改图片的透明度,opacity : 0.2,数值范围为0至1之间的小数。

    用js实现的模拟jquery的animate自定义动画(2.5K)

    5:支持opacity透明度变化; 6:支持+= -= *= /=操作; 7:支持单位操作(px, %); 2:使用说明 jelle(A).animate(B, C, D); A:需要执行动画的dom元素ID; B:动画的主要参数传递{key,val,key2,val2};比如{

    jqzoom图片放大器代码.zip

    imageOpacity,默认值:0.2,当zoomType的值为’reverse’时,这个参数用于指定遮罩的透明度。 title,默认值:true,在放大窗口中显示标题,值可以为a标记的title值,若无,则为原图的title值。 showEffect,...

    图片放大镜

    'opacity' : 0.5 //设置透明度 }) m.img.src = m.cont.getElementsByTagName('img')[0].src; //让原始图像的src值给予放大图像 m.cont.style.cursor = 'crosshair'; m.cont.onmouseover = magnifier.start;...

Global site tag (gtag.js) - Google Analytics