浏览器的css不透明度的问题

整理文档很辛苦,赏杯茶钱您下走!

免费阅读已结束,点击下载阅读编辑剩下 ...

阅读已结束,您可以下载文档离线阅读编辑

资源描述

关于各种浏览器的css不透明度的问题今天,公司的项目中,要求用alphablending来重画conqueror的opacity,把浏览器的body容器画透明,目的是为了露出浏览器窗口后面播放的流媒体,而那些控制元素还可以看见。为了实现上更容易一些,查找了conqueror是如何实现调节opacity的。IE里,很容易就可以调节opacity的值,比如一张图片,它的id=image,那么我们可以用这样的css来设置。styletype=text/css#image{filter:alpha(opacity=30);//IE}/style微软在它的浏览器中,对javascript和css都进行了很多的扩展,css的filter组件就是一个扩展,大学的时候我还花了很多时间来玩filter,后来发现它根本不能在别的浏览器工作时,就不用它了。firefox里,也一样可以,不过写法不一样。代码如下“styletype=text/css#image{-moz-opacity:0.30;//ff}/style如果在javascript里写的话,对应的属性是.style.MozOpacity。conqueror里,我找到的写法是:styletype=text/css#image{-khtml-opacity:0.30;//conq}/style但是,我测试发现它不work!,又javascript来控制(.style.KhtmlOpacity),还是不work,到conqueror的官方网站找到的是,3.1版本以后就已经不再支持了!!我一个下午的所有努力就这样白费了。另外,还找到一个js函数,用来让各种浏览器支持这个属性的functionsetOpacity(obj,opacity){opacity=(opacity==100)?99.999:opacity;//IE/Winobj.style.filter=alpha(opacity:+opacity+);//Safari1.2,Konquerorobj.style.KHTMLOpacity=opacity/100;//OlderMozillaandFirefoxobj.style.MozOpacity=opacity/100;//Safari1.2,newerFirefoxandMozilla,CSS3obj.style.opacity=opacity/100;}函数的第一行,一个三目运算符,好像是针对firefox来设置的。这个函数怎么调用?我不太清楚,我让body的onload=“setOpacity(image,20),但是,并没有效果。我又改了函数,变成这样:functionsetOpacity(obj,opacity){opacity=(opacity==100)?99.999:opacity;//IE/Windocument.all('obj').style.filter=alpha(opacity:+opacity+);//Safari1.2,Konquerordocument.getElementById('obj').style.KHTMLOpacity=opacity/100;//OlderMozillaandFirefoxdocument.getElementById('obj').style.MozOpacity=opacity/100;//Safari1.2,newerFirefoxandMozilla,CSS3document.getElementById('obj').style.opacity=opacity/100;}不好意思,还是不工作。具体为什么?有时间再继续研究。

1 / 4
下载文档,编辑使用

©2015-2020 m.777doc.com 三七文档.

备案号:鲁ICP备2024069028号-1 客服联系 QQ:2149211541

×
保存成功