Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.