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