CSS中透明的实现以及兼容YuAlive

1.基本写法，在除了IE外的Firefox, Safari, Chrome和Opera浏览器中均有效

#ceng { opacity: 0.7; }

上面的0.7表示的是透明度，1为完全不透明，0为完全透明。opacity的属性可以精确到0.01

2.IE下设置透明度的方法

#ceng { filter: alpha(opacity=40); }

以上写法适用于IE6 和 IE7 但是这里必须注意的是需要被透明的元素必须有”布局” 也就是要定义width或者position,否则滤镜效果将无效。在IE8下面设置的方法如下

#ceng { 
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);/* 第一行在IE6, IE7和IE8下有效 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /*第二行仅在IE8下有效 */
}

总结一下可以按照如下的写法基本适用于所有的浏览器了

#ceng{
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

3.使用JavaScript设置和改变CSS透明度

document.getElementById("ceng").style.opacity = ".4";  // 针对所有现代浏览器  
document.getElementById("ceng").style.filter = "alpha(opacity=40)";// 针对IE

4.使用jQuery设置和改变CSS透明度

$("#ceng").css({ opacity: 0.4 }); // 所有浏览器有效

评论 0