Opacity Using CSS in all Browsers

Posted on August 26, 2010

You can use CSS to give levels of opacity to some objects in all browsers.

Most recent browsers (except, of course, Internet Explorer) already accept CSS 3 for opacity. So, for the great majority of recent browsers you will have to use this line of code to give a 60% opacity for a certain object:

1

opacity: 0.6;

For older Mozilla browsers, like Netscape Navigator, use this instruction:

1

-moz-opacity: 0.6;

For oldest Safari versions, you have to use this instruction:

1

-khtml-opacity: 0.6;

Incredibly, for recently released Internet Explorer 8, a specific instruction is needed:

1

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";

For olders versions of Internet Explorer (IE5 to IE7) and for Internet Explorer 8 rendering as IE7, use the following:

1

filter: alpha(opacity=60);

So, if we wanted to give an image, with the class ‘transparent’, 60% of opacity using CSS, we would have to do the following:

1
2
3
4
5
6
7

image.transparent {
   opacity: 0.6;
   -moz-opacity: 0.6;
   -khtml-opacity: 0.6;
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
   filter: alpha(opacity=60);
}

• Opacidade com CSS em todos os Browsers (Versão PT)

This entry was posted in CSS and tagged css, web design. Bookmark the permalink.