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

CSS样式表
Flash页面如何通过校验
静态页面加密
如何禁止打印页面
比较不错的打印效果 css
!important在ie7.0的hack方法
最基本的几种 CSS 文字滤镜效果
HTML中的图象标签属性
marquee的详细用法解析
使用#default#userdata组件实现的可记忆内容的编辑器
li的简单应用(将前面的点换成图标)
windows的listview一样,而且不能把表头从表格里面独立出来
一些不标准的东西,不过还是有点用处
用js控制css的不错的方法
CSS解决未知高度垂直居中
在线ASC码查询
关于CSS:优先级
文字或图片元素在DIV中垂直居中
Mozilla建议的CSS书写顺序
微软终于对网页三剑客下手了
div+css布局入门

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


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