Cross-Browser Compatible CSS Opacity

Written by David Walsh on Thursday, August 9, 2007

Playing around in Photoshop, I understand the role that opacity can play in the design of an image. Why can’t we take that over to the web? CSS opacity has been overlooked for quite some time and there doesn’t seem to be one solid, cross-browser solution to the problem. Over the past day or two I’ve been looking at ways to create opacity in images WITHOUT using javascript. This worked for me using images and DIV elements.

.show-50 { -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50; }

Example

Opacity Rules!

The downside to the above code, of course, is that it’s not great when it comes to standards. As a developer though, I know that the most important thing is that it works! Tested in IE6, IE7, Firefox 2+, Safari, and Opera 9.

Download PDF

Follow via RSS Epic Discussion

January 17 / #

plasebo says:

The only drawback with CSS opacity is that the text inside the div is blurred as well. Adding more opacity to the text inside the dic container do not solve the problem.

css-tricks.com doucmented this issue and found a solution to this problem.

September 09 / #

Leith Bade says:

For IE 8 that code needs to be changed to:

.show-50 { -moz-opacity:.50; -ms-filter:”alpha(opacity=50)”; filter:alpha(opacity=50); opacity:.50; }

And to support old 1.x versions of Safari:

.show-50 { -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:”alpha(opacity=50)”; filter:alpha(opacity=50); opacity:.50; }

See http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx

January 13 / #

Victor De la Rocha says:

Thank you very much! :)

February 16 / #

kovshenin says:

Thanks. Helped a lot ;)

April 24 / #

Pierce O' Broin says:

Thanks for the suggestion but this rule can BREAK IE. I used it in conjunction with a large amount of javascript (and jquery) and it apparently caused a memory leak. BEWARE!!!!

June 09 / #

Rich Boy says:

So, how exactly do I use this?

.show-50 – How can I apply this to specific tags? If I change it to .opaque-text {css here} will it work, or does that .show-50 part make it work?

June 16 / #

Ross Bearman says:

Rich, the .show-50 is simply the class name, you can change this to whatever suits you. To implement this you’d use the following HTML:

<div class=”show-50″>Content</div>

Where “Content” is whatever you want in the container. If you changed the CSS to .opaque-text, you’d simply use:

<div class=”opaque-text”>Content</div>

August 02 / #

ajay says:

heiy…it’s work for in all my testing browsers (firefox, IE:using IETester,opera,safari windows and chrome). thanx david! :)

August 03 / #

Paul says:

This is pretty well documented and used often. It’s a cool feature that deserves attention, but calling it “overlooked for quite some time” is stretching too far in my opinion.