CSS中怎么实现Firefox与IE透明度

发布时间:2021-09-06 18:27:37 作者:chen
来源:亿速云 阅读:94

本篇内容介绍了“CSS中怎么实现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&Prime;;       //设置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&Prime;;       }   </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透明度”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

推荐阅读:
  1. css区分ie8/ie9/ie10/ie11 chrome firefox的示例
  2. CSS HACK怎样区别IE6、IE7、IE8、Firefox兼容性

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:CSS盒模型的详细介绍

下一篇:DIV CSS设计中常见的问题和解决方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》