CSS中轻松实现Firefox与IE透明度

开发 前端
本文向大家描述一下CSS中实现Firefox与IE透明度(opacity)的不同方法,Dreamweaver提供的透明度样式只能支持IE,想要在Firefox下实现,需要自己手写。

你对CSS中实现Firefox与IE透明度的概念是否了解,这里和大家分享几种实现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代码

  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.  

  文章来源: Div-CSS.net设计网 参考:http://www.div-CSS.net/div_CSS/topic/index.asp?id=10037

【编辑推荐】

  1. CSS中padding和margin属性用法说明
  2. 探究IE8与IE7具体功能中窗口功能按钮的变化
  3. 剖析Margin和Padding属性中四个值的先后顺序及区别
  4. 九步轻松解决IE6的各种疑难杂症
  5. 技术前沿 一段JS代码轻松解决IE6-IE8的兼容性问题
责任编辑:佚名 来源: div-CSS.net
相关推荐

2020-12-01 10:54:41

GIMP图片透明度

2010-09-13 15:32:38

DIV背景

2020-11-27 08:51:29

CSSOpacity透明度

2022-02-15 09:31:43

透明度CSS

2022-05-16 10:29:17

开源社区透明度开发者

2009-11-03 17:35:05

VB.NET窗体透明度

2019-10-10 10:30:07

云计算云安全公共云

2024-01-17 08:22:23

16进制值透明度颜色值

2024-03-06 11:43:42

2010-09-01 15:16:47

CSSIEFirefox

2010-08-31 09:24:29

FireFoxIECSS

2020-09-17 14:32:52

AI

2010-08-20 14:47:02

IEFirefoxCSS

2010-08-27 15:56:52

IEFirefoxCSS

2013-05-29 14:17:42

2022-07-27 10:51:05

数据中心

2022-06-28 13:51:55

数据中心透明度和创新

2010-08-16 15:15:12

CSSFireFoxIE

2021-07-02 16:07:21

区块链互联网技术

2020-09-18 12:27:44

AIGPT-3算法
点赞
收藏

51CTO技术栈公众号