CSS - firefox与IE透明度(opacity)设置区别
2010-01-24 16:59
411 查看
IE:
filter:alpha(opacity=sqlN)
其中 sqlN的值域为[0, 100]
js:ieNode.style.filter="alpha(opacity=sqlN)";
Firefox:/*参考,不推荐使用*/
-moz-opacity:sqlN
其中sqlN的值域为[0, 1]
[b]Firefox,Chrome和Safari:[/b]
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;
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>
filter:alpha(opacity=sqlN)
其中 sqlN的值域为[0, 100]
js:ieNode.style.filter="alpha(opacity=sqlN)";
Firefox:/*参考,不推荐使用*/
-moz-opacity:sqlN
其中sqlN的值域为[0, 1]
[b]Firefox,Chrome和Safari:[/b]
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;
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透明度(opacity)设置区别
- CSS - firefox与IE透明度(opacity)设置区别
- firefox与IE透明度(opacity)设置区别
- firefox与IE透明度(opacity)设置区别
- css中使用rgba和opacity设置透明度的区别
- CSS设置div透明度;FireFox 3.5+ 已不再支持 -moz-opacity
- css 设置 透明度,适用ie,firefox
- CSS透明度设置支持IE,Chrome,Firefox浏览器
- CSS 半透明度设置归纳总结[Firefox,IE,Chrome,Safari]
- CSS透明度设置支持IE,Chrome,Firefox浏览器
- CSS透明度设置支持IE,Chrome,Firefox浏览器
- IE与Firefox下对CSS解析的区别
- IE 窗口缩小css-IE,firefox居中的区别
- IE和Firefox中Javascript和CSS的区别(轉:http://blog.csdn.net/superbeck/archive/2008/10/16/3082550.aspx)
- IE,firefox , chrome设置圆角 css
- Javascript与CSS在IE和Firefox中的误区及区别
- firefox与IE对javascript和CSS的区别
- firefox与IE对javascript和CSS的区别
- 关于IE和Firefox中javascript和css的一些区别
- html-firefox与IE对javascript和CSS的区别(浏览器兼容)