CSS Transparency Settings for All Browsers

Home

tips

Project Categories

Tips and Tricks:

Follow Twitter

Thursday, 11 March 2010 12:12

How to set the opacity of an element.

Here is example (opacity 80%):

How to Set opacity using CSS

Opacity for all browsers exept IE's


.opacity {
opacity: .8;
}

Opacity for IE 5/6/7


.opacity {
filter: alpha(opacity=80);
}

Opacity for IE 8


 .opacity {
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 }

So, for all browsers CSS will be:


 .opacity {
opacity: .8;
filter: alpha(opacity=80);
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 }

Last Updated on Thursday, 11 March 2010 16:41

Comments

#1 2010-03-16 16:25

Thanks, very helpful

Quote

Refresh comments list

Add comment

JComments

View all tutorials

Adobe Flash Player not installed or older than 9.0.115!

CSS Sprites: What They Are, Why You need it and How To Use Them

If this is Your first meeting with CSS Sprites?

Do you really understand them? The name might be a little misleading, because sprites aren't little images like you might be picturing, a sprite is actually one big image. Have you ever seen the CSS technique where the "on" and "off" states of a button are contained within the same image and are activated by shifting the background-position? This is example how I use it in my site:

Sopov.com freelancer, html and css tips and tricks