CSS3: RGBA Semi-Transparent Colours

The upcoming CSS3 will see support for more complex colour values, including an alpha value. Using CSS2, a semi-transparent background has been a bit of a problem. You had the option of using a semi-transparent PNG image but this isn’t supported by IE6 without some Javascript modification. Alternatively, you could create a <div> tag, and set the opacity and filter (IE) properties to make it semi-transparent. The problem here is that the opacity is inherited so the contents of your <div> tag are faded as well. See our workaround here.

However, in CSS3, we can simply declare a <div> tag like this.

<div style="background: rgb(99, 00, 00, 0.8);"></div>

to create a div with a semi-transparent dark-red background. Any content inside the <div> tag would be rendered using full opacity. Problem solved. RGBA colours are already supported in Safari 3 and Firefox 3, which also support an alpha value for the HSL colours that they support.

This entry was posted in Web Design. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>