CSS中輕松實現(xiàn)Firefox與IE透明度
作者：admin
本文向大家描述一下CSS中實現(xiàn)Firefox與IE透明度(opacity)的不同方法，Dreamweaver提供的透明度樣式只能支持IE,想要在Firefox下實現(xiàn)，需要自己手寫。
你對CSS中實現(xiàn)Firefox與IE透明度的概念是否了解，這里和大家分享幾種實現(xiàn)Firefox與IE透明度的方法，希望對你的學習有所幫助。
CSS中實現(xiàn)Firefox與IE透明度(opacity)的不同方法
Dreamweaver提供的透明度樣式只能支持IE,想要在Firefox下實現(xiàn)，需要自己手寫。如下：
1.IE6設置透明度
CSS設置
filter:alpha(opacity=50);
javascript設置
IESpanJs.style.filter=“alpha(opacity=50)”;
2.Firefox3.5設置透明度
Firefox3.5支持CSS3，已經(jīng)不對原來的透明度樣式(-moz-opacity)提供支持（網(wǎng)上查的），在本人的Firefox3.5.5上測試后，發(fā)現(xiàn)確實如此，現(xiàn)在的透明度設置為：
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設計網(wǎng) 參考:http://www.div-CSS.net/div_CSS/topic/index.asp?id=10037
【編輯推薦】
責任編輯：佚名
來源：
div-CSS.net
