Update: the use of RGBa in CSS

A working solution for transparency in web standards browser

I read this today on one of Andy Clarkes websites, he heard it from a conference talk by Cederholm.

Here's the CSS syntax: p {color: rgba(255, 255, 255, 0.5);} The RGBa let's you set the RGB values for Red, Green and Blue, like in a regular RGB CSS color, but then adds 'a' for the alpha channel.

You can use this for anything that can take the CSS color property

Transparency on Font Example

50% Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eui

HTML Code from Example above:

50% Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eui

CSS code from example above: #bgNew {
width: 400px;
height: 300px;
background: url(leaf.gif) repeat;
border: 2px solid black;
}
#bgNew p {
padding: 40px;
font-size: 18px;
font-weight: bold;
color: rgba(0, 0, 0, 0.7);
}

Transparency on background example:

Same thing as above, but this time we're adding a white background on the text and use the alpha channel in CSS:

50% Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eui

HTML Code from Example above:

50% Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eui

CSS code from example above: #bgNew2 {
width: 400px;
height: 300px;
background: url(leaf.gif) repeat;
border: 2px solid black;
padding: 40px;
}
#bgNew2 p {
padding: 40px;
font-size: 18px;
font-weight: bold;
background: rgba(255, 255, 255, 0.5);
}

---

The article below is the old article for this page. It fails on the fact that the opacity property in CSS is supposed to be inherited, which makes it hard to use on a single element like above.

CSS Transparency for Internet Explorer (IE), Mozilla and Safari

Updated 9/23/05

Note: Also see use transparency as mouseover.

The current situation with CSS and Transparency (or translucency / opacity) is:

• The Web Standard in CSS 3 for creating transparency or opacity is only supported by Safari and newer (Mozilla) Firefox.
• The standard way of declaring transparency is opacity: 0.5;
• Mozilla (version 1.6 and below) uses the property -moz-opacity:0.5; for transparency.
• IE uses the propietary filter:alpha(opacity=50);
• -moz-opacity and opacity lets all the children of the styled container inherit the transparency, I cannot currently find a decent way around this.
• Thus, I've only been able to make this work for Internet Explorer (go figure..)

In my example I've declared transparency 3 times to cover the approches mentioned (CSS3, Internet Explorer and Mozilla).

IE uses the syntax filter:alpha(opacity=50), where a lower value makes the element more transparent, while Mozilla uses -moz-opacity:0.5 where a lower value has the same effect on transparency. The same things goes for the CSS3 valid syntax opacity:0.5;

-moz-opacity and opacity, all elements inside the styled box will also recieve the same transparency. Can't find a way to get around this.

IE will need a position:relative on the text containing layer if you want the child element not to inherit the transparency.

Example:

50% Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eui

CSS:




HTML:

50% Lorem ipsum dolor sit amet, consectetuer adipiscing etc. etc.

Thanks for all help I've gotten to sort out issues with this code. Too many to mention, you know who you are :-)