当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 兼容多浏览器实现半透明(Opera ie firefox)

CSS样式表
关于CSS的一些基础应用
纯CSS实现的无侵入的卡盘(幻灯片)
w3c标准自适应高度height100%不起作用的问题分析
CSS代码组合和嵌套
CSS常用属性缩写实例
CSS代码缩写实例以及CSS缩写原因总结
网页字体大小的设计技巧
CSS3的新特性介绍
DOCTYPE和XHTML的相关认识
DIV CSS建立的符合web标准网页的好处
CSS语法缩写规则
FireFox浏览器和IE浏览器下CSS兼容问题
CSS代码属性分组的写法例子
解决全部网页木马的技巧
css教程:DIV垂直居中的办法
css常用布局多行多列
不同浏览器的CSS Hack写法小结
CSS 控制字符宽度省略号效果 兼容浏览器
纯CSS实现的三级下拉菜单实现代码
快速定位页面中复杂 CSS BUG

CSS样式表 中的 兼容多浏览器实现半透明(Opera ie firefox)


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 136 ::
收藏到网摘: n/a

Click on a link above to make the image disappear and re-appear by gradually fading in/out. It uses CSS transparency, in CSS you can set the transparency in different ways. To ensure that it works on most browsers we use all three.
opacity: 0.5;
This one is the official CSS3 method, at the moment it works in newer Mozilla versions.
-moz-opacity: 0.5;
This one works in older versions of Mozilla and Phoenix/FireBird/FireFox.
-khtml-opacity: 0.5;
This is used by browsers that use teh KHTML rendering engine, namely Konquerer on Linux and Safari on MacOS.
filter: alpha(opacity=50);
This one works only in MSIE.
There is actually another one: -khtml-opacity: 0.5; works for the browsers Konquerer on Linux and Safari on MacOS. You could add it too if you want to support these users. Somewhere in the near future most browsers will support CSS3 and opacity: 0.5; should work everywhere.
复制代码 代码如下:

function opacity(id, opacStart, opacEnd, millisec) {
//speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;
//determine the direction for the blending, if start and end are the same nothing happens
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}
//change the opacity for different browsers
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
function shiftOpacity(id, millisec) {
//if an element is invisible, make it visible, else make it ivisible
if(document.getElementById(id).style.opacity == 0) {
opacity(id, 0, 100, millisec);
} else {
opacity(id, 100, 0, millisec);
}
}
function blendimage(divid, imageid, imagefile, millisec) {
var speed = Math.round(millisec / 100);
var timer = 0;
//set the current image as background
document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
//make image transparent
changeOpac(0, imageid);
//make new image
document.getElementById(imageid).src = imagefile;
//fade in image
for(i = 0; i <= 100; i++) {
setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
timer++;
}
}
function currentOpac(id, opacEnd, millisec) {
//standard opacity is 100
var currentOpac = 100;
//if the element has an opacity set, get it
if(document.getElementById(id).style.opacity < 100) {
currentOpac = document.getElementById(id).style.opacity * 100;
}
//call for the function that changes the opacity
opacity(id, currentOpac, opacEnd, millisec)
}

更多参考
http://www.brainerror.net/scripts_js_blendtrans.php
http://realazy.org/blog/2006/03/21/ie-firefox-opera-alpha-transparency/
http://alistapart.com/stories/pngopacity/