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

CSS样式表
event.currentTarget和document.activeElement用法
指定网页doctype解决CSS Hacking
揭开迷惑 理解CSS的浮动Float
css网页布局中注意的几个问题
H1的位置对SEO的影响
网页制作与CSS的UTF-8和GB2312编码问题
CSS制作政府公文的代码
不要使用的HTML标签(WEB标准网页布局)
CSS网页设计时关于字体大小的设计
css教程:网页字体及字体大小的设计
描述性列表UL和DL的表现形式
CSS Alpha透明相关知识学习
关于W3C CSS标准的一些经验
CSS3属性选择符介绍
CSS网页布局的好处与坏处
div css制作网页实战笔记心得
Opera下cloneNode的bug
CSS:清除浮动的最优方法
由浅入深实践学习 Web 标准
另一个角度谈谈DIV CSS

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 103 ::
收藏到网摘: 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/