Easy cross-browser transparency

Matthew Pennell | 19 December 2006

If you've ever found yourself in the position of needing to place a semi-transparent image or layer on a web page, you've probably ended up reading various arcane methods involving 24-bit PNG graphics and proprietary IE AlphaImageLoader expressions. Luckily, there is an easier way; albeit at the expense of valid CSS.

Browser-specific properties

Due to the way different browsers have implemented transparency, there are three different CSS properties that can affect the transparency of an element:

The CSS3 specification has a simple opacity property, which takes a decimal value between 0 (invisible) and 1 (solid)
Mozilla browsers implement their own browser-specific property, -moz-opacity, which takes the value in the same format
Internet Explorer (versions 5.5 and above) also have their own browser-specific property: The filter property can be used to apply various effects via CSS (gradients, blurs, shadows, etc.). For transparency, we can use the alpha filter and pass in an opacity value between 0 and 100

By declaring all three of these properties, we can achieve a reliable cross-browser transparency effect:

	
#transparentblock {
	opacity: 0.6;
	-moz-opacity: 0.6;
	filter: alpha(opacity=60);
}

This semi-transparent effect can be used on both rectangular blocks (for example, an overlay div) and on irregular shapes, although, for the latter, a 'halo' effect may be seen if the transparent graphic was created with a lighter or darker background than that on which it is to be placed.

Drawbacks

Unfortunately, child elements of transparent blocks will inherit their parent's transparency and this cannot be reliably reset by re-declaring the transparency at 100% on the child element (it only works in IE, and then only if the text has position: relative set, and the parent element does not have its position property set to relative or absolute).

For this reason, it is recommended that if your semi-transparent block is to contain text, a reasonably high opacity value (at least 80% or above) is used, to ensure that the text is readable.

Finally, as noted above, none of the three properties used here will pass the W3C CSS Validator. How important this is depends entirely on your own attitude to validation; personally, I rate CSS validation significantly further down the scale of importance than HTML validation—the latter can seriously screw up your page's appearance, while the former (as long as you have no parsing errors) is, by and large, mostly harmless.

References

Permanent link | Filed under: Cascading Style Sheets (CSS)

About the Author

Matthew Pennell works as a senior designer for one of Europe's leading hotel booking websites, writing semantic XHTML, bleeding-edge CSS and JavaScript that usually works. When he's not doing that, he can be found writing reviews and comment for Digital Web Magazine, organising his local Refresh group, or blogging at The Watchmaker Project, where he writes occasional entries and wishes more people would send him memes.

Articles by Matthew Pennell

13 Comments

| Post a comment | Comments Feed

Derek Allard : http://www.derekallard.com

19 December 2006, 20:21 : Permanent link to comment

This is remarkably flexible, thanks. I’m wondering why you advocate -moz-opacity still. Firefox has supported opacity since at least 1.5 (Mozilla since 1.7), and its also supported by Opera and Safari (I don’t know specific versions).

As you stated, opacity is part of CSS 3 and does pass the CSS validator if you set it to the correct CSS version (under more options).

I’m wondering if it wouldn’t be semanticly nicer to just use opacity and a conditional IE stylesheet or stylesheet link…

<style type=“text/css”> #transparentblock { opacity: 0.6;
}
</style>
<!—[if IE]>
<style type=“text/css”> #transparentblock { filter: alpha(opacity=60);
}
</style>
<![endif]—>
Matthew Pennell : http://www.thewatchmakerproject.com/

19 December 2006, 21:19 : Permanent link to comment

You’re right, Derek, that would an easy way to preserve validity, and the numbers of pre-1.5 Firefox users is probably negligible. I keep it in there for those last few 1.0.7 stragglers. ;)
Bramus! : http://www.bram.us/

19 December 2006, 23:41 : Permanent link to comment

Solution to the transparency inheritance is the use of a transparent png as background image.

The png transparency works in all A-grade browsers, except IE6, but that can be bypassed by applying a (non-validating) CSS filter property to the element (to bypass the validation issue use a conditional as seen in the first comment)
Bramus! : http://www.bram.us/

20 December 2006, 00:14 : Permanent link to comment

Looks like my comment was deleted, or didn’t arrive at all … 2nd try.

Anywho, I suggested the usage of a transparent png as background image so that the transparency inheritance won’t be a problem anymore.

Only a small CSS fix for IE6 is needed: the usage of the (invalid) filter property:

element { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=ā€™myimage.pngā€™,sizingMethod=ā€™scaleā€™);
}

To bypass the property being invalid, a conditional as seen in the first comment is needed.
Julian Schrader : http://julianschrader.de

26 December 2006, 22:20 : Permanent link to comment

Great article, thank you!

I think this will be of use for me shortly.
Su : http://

29 December 2006, 02:26 : Permanent link to comment

Small but important detail: Whether -moz-opacity “passes” the validator is irrelevant. Vendor extensions, while not recommended, are completely valid. The validator just doesn’t recognize them.
Verdure Thought : http://www.verdurethought.com

5 January 2007, 21:49 : Permanent link to comment

Small but effective solution for layer transparency. I am sure this will open up new ways of design trends among the web designers.

Regards,

K . S . Karthick Murari
www.verdurethought.com
freshness in every pixel
RenĆ© : http://

6 January 2007, 15:12 : Permanent link to comment

be aware of opacity when using firefox 2+ on mac os x

besides the over-antialiasing effect firefox have massive problems to handle opacity.

one fix could be to set the opacity to 0.9999 ā€“ that would help firefox render the font betterā€¦

but if you want have some nifty dhtml effects like moo.fx provide it then you have no chance to get a clear screendesign. paragraphs and headlines bouncing on opacity change.

_ ā€¦ it’s hilarious how this browser went down to buglevel of internet explorer. _
Michael Kolias : http://

6 January 2007, 19:20 : Permanent link to comment

For those of you who are obsessed about validation like me there is a neat solution to the problem. Use JavaScript to set the opacity.<br />
var oe = document.getElementById(‘opaque_element’);
oe.setAttribute(“style”, “opacity:0.6;”)
if (oe.style.setAttribute) //For IE oe.style.setAttribute(“filter”, “alpha(opacity=60);”)
Stew Houston : http://www.kingofwww.com

8 January 2007, 17:58 : Permanent link to comment

Hi guys,

I was having trouble with IE’s alpha(opacity=*) consistency for the longest time. For “filter:” commands to be applied in IE the object must have a defined width and or height; it must have a layout. JavaScript element.currentStyle.hasLayout must evaluate true

Cheers
Stew

Stew
Shimon : http://www.chossonandkallah.com

8 January 2007, 20:39 : Permanent link to comment

Thank you!

I’ve spent so much time before for looking for at lease working and useful solution, and finaly I’ve still used non-transperent images for IFE, and now it seems half of times I can be more flexible in it!!!

Thank you one more time!!!
Robert Nyman : http://www.robertnyman.com

8 January 2007, 21:59 : Permanent link to comment

It should be noted that <code>opacity</code> is supported just fine in Mozilla web browsers as well. Also, it’s better to use the filter with progid in IE for performance reasons, like this: <code>filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);</code>
James John Malcolm : http://james.gameover.com/

11 January 2007, 15:45 : Permanent link to comment

Good points Robert!

Commenting is closed for this article.