Managing crossbrowser opacity with CSS
Filed Under Css •
Sometimes you may want to change the opacity of some images with CSS.
There are different ways to do it, according to the browser you are using. In this example, we'll see both Explorer and Firefox.
Firefox
In Firefox, the style is -moz opacity: xx where xx is a number from 0 to 1, where lesser equates to more transparency (basically, it's the alpha).
-
<img style="-moz-opacity:0.5" src="/images/google_logo.gif">
The above image should look solid in Explorer and 50% transparent in Firefox.
Explorer
In Explorer, the style is filter: alpha(opacity=xx) where xx is a number between 0 and 100 (again, it's the alpha)
-
<img style="filter: alpha(opacity=50)" src="/images/google_logo.gif">
The above image should look solid in Firefox and 50% transparent in Explorer.
Firefox and Explorer
To create an image with transparency both in Firefox and Explorer, you need to use both styles
-
<img style="filter: alpha(opacity=50); -moz-opacity:0.5" src="/images/google_logo.gif">
This image should look 50% transparent in Explorer and in Firefox.
Tell me what do you think about this post. I'll write better and better entries.
(1 votes, average: 5 out of 5)
Loading ...They can be a great start to launch a website of your own and meet the individual needs of your project.
4 Responses to “Managing crossbrowser opacity with CSS”
Leave a Reply
-
Latest MochiAds Games
These codes are Not working in OPERA. How we can manage opacity in opera browser?
Opera has not yet support the opacity standard from the beginning Opera support the CSS 3 opacity, not to support its private Alpha transparent attributes
For opera:
For Opera: style=”opacity:0.5;”
Note:
Sorry for the previous reply..