你對CSS中實現Firefox與IE透明度的概念是否了解，這裡和大家分享幾種實現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>
文章來源: Div-CSS.net設計網 參考:http://www.div-CSS.Net/div_CSS/topic/index.ASP?id=10037