How to realize the transparency of Firefox and IE in CSS
This article introduces the relevant knowledge of "how to achieve Firefox and IE transparency in CSS". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!
Different methods to achieve Firefox and IE Transparency (opacity) in CSS
The transparency style provided by Dreamweaver can only support IE. If you want to implement it under Firefox, you need to write it by hand. As follows:
1.IE6 sets transparency
CSS Settin
Filter:alpha (opacity=50)
Javascript Settin
IESpanJs.style.filter= "alpha (opacity=50)"
2.Firefox3.5 sets transparency
Firefox3.5 supports CSS3 and no longer supports the original transparency style (- moz-opacity). After testing on my Firefox3.5.5, I found that this is true. The transparency is now set to:
CSS Settin
Opacity:0.5
Javascript Settin
FirefoxSpanJs.style.mozOpacity= "0.5"
Previous versions of 3.Firefox3.5 set transparency
CSS Settin
-moz-opacity:0.5
Javascript Settin
FirefoxSpanJs.style.mozOpacity= "0.5"
4.demo code
.IECSS {display:-moz-inline-box; display:inline-block; width:100; height:100; background-color:red; filter:alpha (opacity=50);} .Firefox 35 CSS {display:-moz-inline-box; display:inline-block; width:100; height:100; background-color:blue; opacity:0.5;} .Firefox CSS {display:-moz-inline-box; display:inline-block; width:100; height:100 Background-color:yellow;-moz-opacity:0.5;} _ window.onload = function () {/ / set IE var IESpanJs = document.getElementById ("IESpanJs"); IESpanJs.style.display = "inline-block"; / / IE supports IESpanJs.style.width = 100; IESpanJs.style.height = 100; IESpanJs.style.backgroundColor = "red"; IESpanJs.style.filter= "alpha (opacity=50)" / / set Firefox3.5.* var Firefox35SpanJs = document.getElementById ("Firefox35SpanJs"); try {Firefox35SpanJs.style.display = "- moz-inline-box"; / / Firefox support} catch (e) {Firefox35SpanJs.style.display = "inline-block"; / / support IE} Firefox35SpanJs.style.width = 100; Firefox35SpanJs.style.height = 100; Firefox35SpanJs.style.backgroundColor = "blue"; Firefox35SpanJs.style.opacity= "0.5" / / set Firefox var FirefoxSpanJs = document.getElementById ("FirefoxSpanJs"); try {FirefoxSpanJs.style.display = "- moz-inline-box"; / / Firefox support} catch (e) {FirefoxSpanJs.style.display = "inline-block"; / / support IE} FirefoxSpanJs.style.width = 100; FirefoxSpanJs.style.height = 100; FirefoxSpanJs.style.backgroundColor = "yellow"; FirefoxSpanJs.style.mozOpacity= "0.5" } IE_CSS Firefox3.5_CSS Firefox_CSS
This is the end of IE_Js Firefox3.5_Js Firefox_Js 's "how to achieve Firefox and IE transparency in CSS". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!
