CSS - firefox与IE透明度(opacity)设置区别
IE：
filter:alpha(opacity=sqlN)
其中 sqlN的值域为[0, 100]
js: ieNode.style.filter="alpha(opacity=sqlN)";
Firefox：/*参考,不推荐使用*/
-moz-opacity:sqlN
其中sqlN的值域为[0, 1]
Firefox,Chrome和Safari：
opacity:sqlN
其中sqlN的值域为[0, 1]
js: firefoxNode.style.opacity=sqlN;
对于Firefox来说，用opacity就能完成透明化设置了，所以上面的-moz-opacity参考一下。
还有请注意，上面的属性会将元素内的所有内容都透明化，包括文字与图片，所以如果想要背景半透明的话，目前推荐的方法是用PNG图片做背景。
一般不考虑IE6兼容性，如果要考虑IE6的兼容性请在网上搜索PNG JS，会有一些javascript能够优化IE6下的PNG半透明。
Demo :
1 <HTML>
2 <HEAD>
3 <style type="text/css">
4 .ieCss {
5 display:-moz-inline-box;
6 display:inline-block;
7 width:100;
8 height:100;
9 background-color:red;
10 filter:alpha(opacity=50);
11 }
12 .fireFox35Css {
13 display:-moz-inline-box;
14 display:inline-block;
15 width:100;
16 height:100;
17 background-color:blue;
18 opacity:0.5;
19 }
20 .fireFoxCss {
21 display:-moz-inline-box;
22 display:inline-block;
23 width:100;
24 height:100;
25 background-color:yellow;
26 -moz-opacity:0.5;
27 }
28 </style>
29
30 <script>
31 window.onload = function() {
32 //设置IE
33 var ieSpanJs = document.getElementById("ieSpanJs");
34 ieSpanJs.style.display = "inline-block"; //ie支持
35 ieSpanJs.style.width = 100;
36 ieSpanJs.style.height = 100;
37 ieSpanJs.style.backgroundColor = "red";
38 ieSpanJs.style.filter="alpha(opacity=50)";
39
40 //设置firefox3.5.*
41 var firefox35SpanJs = document.getElementById("firefox35SpanJs");
42 try
43 {
44 firefox35SpanJs.style.display = "-moz-inline-box"; //firefox支持
45 }
46 catch (e)
47 {
48 firefox35SpanJs.style.display = "inline-block"; //支持IE
49 }
50
51 firefox35SpanJs.style.width = 100;
52 firefox35SpanJs.style.height = 100;
53 firefox35SpanJs.style.backgroundColor = "blue";
54 firefox35SpanJs.style.opacity="0.5";
55
56 //设置firefox
57 var firefoxSpanJs = document.getElementById("firefoxSpanJs");
58 try
59 {
60 firefoxSpanJs.style.display = "-moz-inline-box"; //firefox支持
61 }
62 catch (e)
63 {
64 firefoxSpanJs.style.display = "inline-block"; //支持IE
65 }
66
67 firefoxSpanJs.style.width = 100;
68 firefoxSpanJs.style.height = 100;
69 firefoxSpanJs.style.backgroundColor = "yellow";
70 firefoxSpanJs.style.mozOpacity="0.5";
71
72 }
73 </script>
74
75 </HEAD>
76
77 <BODY>
78 <span id="ieSpanCss" class="ieCss">IE_css</span>
79 <span id="firefox35SpanCss" class="fireFox35Css">firefox3.5_css</span>
80 <span id="firefoxSpanCss" class="fireFoxCss">firefox_css</span>
81 <br>
82 <br>
83 <span id="ieSpanJs">IE_Js</span>
84 <span id="firefox35SpanJs">firefox3.5_Js</span>
85 <span id="firefoxSpanJs">firefox_Js</span>
86 </BODY>
87 </HTML>
88
2 <HEAD>
3 <style type="text/css">
4 .ieCss {
5 display:-moz-inline-box;
6 display:inline-block;
7 width:100;
8 height:100;
9 background-color:red;
10 filter:alpha(opacity=50);
11 }
12 .fireFox35Css {
13 display:-moz-inline-box;
14 display:inline-block;
15 width:100;
16 height:100;
17 background-color:blue;
18 opacity:0.5;
19 }
20 .fireFoxCss {
21 display:-moz-inline-box;
22 display:inline-block;
23 width:100;
24 height:100;
25 background-color:yellow;
26 -moz-opacity:0.5;
27 }
28 </style>
29
30 <script>
31 window.onload = function() {
32 //设置IE
33 var ieSpanJs = document.getElementById("ieSpanJs");
34 ieSpanJs.style.display = "inline-block"; //ie支持
35 ieSpanJs.style.width = 100;
36 ieSpanJs.style.height = 100;
37 ieSpanJs.style.backgroundColor = "red";
38 ieSpanJs.style.filter="alpha(opacity=50)";
39
40 //设置firefox3.5.*
41 var firefox35SpanJs = document.getElementById("firefox35SpanJs");
42 try
43 {
44 firefox35SpanJs.style.display = "-moz-inline-box"; //firefox支持
45 }
46 catch (e)
47 {
48 firefox35SpanJs.style.display = "inline-block"; //支持IE
49 }
50
51 firefox35SpanJs.style.width = 100;
52 firefox35SpanJs.style.height = 100;
53 firefox35SpanJs.style.backgroundColor = "blue";
54 firefox35SpanJs.style.opacity="0.5";
55
56 //设置firefox
57 var firefoxSpanJs = document.getElementById("firefoxSpanJs");
58 try
59 {
60 firefoxSpanJs.style.display = "-moz-inline-box"; //firefox支持
61 }
62 catch (e)
63 {
64 firefoxSpanJs.style.display = "inline-block"; //支持IE
65 }
66
67 firefoxSpanJs.style.width = 100;
68 firefoxSpanJs.style.height = 100;
69 firefoxSpanJs.style.backgroundColor = "yellow";
70 firefoxSpanJs.style.mozOpacity="0.5";
71
72 }
73 </script>
74
75 </HEAD>
76
77 <BODY>
78 <span id="ieSpanCss" class="ieCss">IE_css</span>
79 <span id="firefox35SpanCss" class="fireFox35Css">firefox3.5_css</span>
80 <span id="firefoxSpanCss" class="fireFoxCss">firefox_css</span>
81 <br>
82 <br>
83 <span id="ieSpanJs">IE_Js</span>
84 <span id="firefox35SpanJs">firefox3.5_Js</span>
85 <span id="firefoxSpanJs">firefox_Js</span>
86 </BODY>
87 </HTML>
88
