Be my fan on FacebookManaging crossbrowser opacity with 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).
1 | <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)
1 | <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
1 | <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.
(4 votes, average: 3.50 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
- Get up to $100,000 for your next Flash game with Mochi GAME Developer Fund
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines – 17 lines version
- Sell sitelocked version of your Flash games and even .fla sources to Free Online Games
- Protect your work from ActionScript code theft with SWF Protector
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines
- Understanding Box2D’s one-way platforms, aka CLOUDS
- Triqui MochiAds Arcade plugin for WordPress upgraded to 1.2
- Box2D Flash game creation tutorial – part 2
- 11 Flash isometric engines you can use in your games
- Monetize your Flash games with GamesChart
- Create a Lightbox effect only with CSS - no javascript needed
- Flash game creation tutorial - part 1
- Create a Flash Racing Game Tutorial
- Flash game creation tutorial - part 2
- Make a Flash game like Flash Element Tower Defense - Part 2
- Flash game creation tutorial - part 3
- Make a Flash game like Flash Element Tower Defense - Part 1
- Create a flash draw game like Line Rider or others - part 1
- Triqui MochiAds Arcade plugin for WordPress official page
- Create a flash artillery game - step 1
- Flash game creation tutorial – part 5.2 (4.88/5)
- Create a flash artillery game – step 1 (4.79/5)
- Create a Flash Racing Game Tutorial (4.76/5)
- Create a flash artillery game – step 2 (4.74/5)
- Create a survival horror game in Flash tutorial – part 1 (4.73/5)
- Creation of a Flash arcade site using WordPress – step 2 (4.73/5)
- Flash game creation tutorial – part 2 (4.71/5)
- Flash game creation tutorial – part 1 (4.70/5)
- Create a flash draw game like Line Rider or others – part 1 (4.69/5)
- Creation of a platform game with Flash – step 2 (4.68/5)
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..