溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“CSS中怎么實現Firefox與IE透明度”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
CSS中實現Firefox與IE透明度(opacity)的不同方法
Dreamweaver提供的透明度樣式只能支持IE,想要在Firefox下實現，需要自己手寫。如下：
1.IE6設置透明度
CSS設置
filter:alpha(opacity=50);
javascript設置
IESpanJs.style.filter=“alpha(opacity=50)”;
2.Firefox3.5設置透明度
Firefox3.5支持CSS3，已經不對原來的透明度樣式(-moz-opacity)提供支持（網上查的），在本人的Firefox3.5.5上測試后，發現確實如此，現在的透明度設置為：
CSS設置
opacity:0.5;
javascript設置
FirefoxSpanJs.style.mozOpacity=“0.5″;
3.Firefox3.5以前版本設置透明度
CSS設置
-moz-opacity:0.5;
javascript設置
FirefoxSpanJs.style.mozOpacity=“0.5″;
4.demo代碼
<HTML> <HEAD> <style type=“text/CSS”> .IECSS { display:-moz-inline-box; display:inline-block; width:100; height:100; background-color:red; filter:alpha(opacity=50); } .Firefox35CSS { display:-moz-inline-box; display:inline-block; width:100; height:100; background-color:blue; opacity:0.5; } .FirefoxCSS { display:-moz-inline-box; display:inline-block; width:100; height:100; background-color:yellow; -moz-opacity:0.5; } </style> <script> window.onload = function() { //設置IE var IESpanJs = document.getElementById(“IESpanJs”); IESpanJs.style.display = “inline-block”; //IE支持 IESpanJs.style.width = 100; IESpanJs.style.height = 100; IESpanJs.style.backgroundColor = “red”; IESpanJs.style.filter=“alpha(opacity=50)”; //設置Firefox3.5.* var Firefox35SpanJs = document.getElementById(“Firefox35SpanJs”); try { Firefox35SpanJs.style.display = “-moz-inline-box”; //Firefox支持 } catch (e) { Firefox35SpanJs.style.display = “inline-block”; //支持IE } Firefox35SpanJs.style.width = 100; Firefox35SpanJs.style.height = 100; Firefox35SpanJs.style.backgroundColor = “blue”; Firefox35SpanJs.style.opacity=“0.5″; //設置Firefox var FirefoxSpanJs = document.getElementById(“FirefoxSpanJs”); try { FirefoxSpanJs.style.display = “-moz-inline-box”; //Firefox支持 } catch (e) { FirefoxSpanJs.style.display = “inline-block”; //支持IE } FirefoxSpanJs.style.width = 100; FirefoxSpanJs.style.height = 100; FirefoxSpanJs.style.backgroundColor = “yellow”; FirefoxSpanJs.style.mozOpacity=“0.5″; } </script> </HEAD> <BODY> <span id=“IESpanCSS” class=“IECSS”>IE_CSS</span> <span id=“Firefox35SpanCSS” class=“Firefox35CSS”>Firefox3.5_CSS</span> <span id=“FirefoxSpanCSS” class=“FirefoxCSS”>Firefox_CSS</span> <br> <br> <span id=“IESpanJs”>IE_Js</span> <span id=“Firefox35SpanJs”>Firefox3.5_Js</span> <span id=“FirefoxSpanJs”>Firefox_Js</span> </BODY> </HTML>“CSS中怎么實現Firefox與IE透明度”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
