Home >Web Front-end >CSS Tutorial >Compatible with multiple browsers to achieve translucency (Opera ie firefox)_Experience exchange

Compatible with multiple browsers to achieve translucency (Opera ie firefox)_Experience exchange

WBOY
WBOYOriginal
2016-05-16 12:09:311668browse

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) {
    //每幀的速度
   0;

    //確定混合方向,如果開始和結束相同,則不會發生
    if(opacStart > opacEnd) {
  
            setTimeout("changeOpac(" + i + ",'" + id + '')",(定時器*速度))     } else if (opacStart         for(i = opacStart; i             定時器++;
        }
 changeOpac (opacity, id) {
    var object = document.getElementById(id).風格; 
    object.opacity = (不透明度/100). 0);
    object.KhtmlOpacity = (不透明度/100);
    object.filter = 「alpha(opacity=」  opacity illisec) {
    //如果某一元素不可見,則使其可見,否則使其不可見
    if(document.getElementById(id).style .opacity == 0) {     } else {
        不透明度(id, 100, 0, 毫秒);
  不透明度(id, 100, 0, 毫秒);
  不透明度(id, 100, 0, 毫秒);
 agefile ,毫秒){
    var speed = Math.round(毫秒/ 100);
    vartimer = 0;
    vartimer = 0;
 .backgroundImage = "url(" + document.getElementById(imageid).src + ")";

    //將圖片建立新映像
    document.getElementById(imageid).src = imagefile;

    //淡入映像       setTimeout(" changeOpac(" + i + ",'" + imageid + "' )",(計時器* 速度));
        (id, opacEnd, millisec) {
    //標準不透明度為100
    var currentOpac = 100;         currentOpac = document.getElementById(id).樣式.不透明度* 100;
    }

    //調用更改不透明度的函數
    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/
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn