CSS 3 transparency basics

Opera 10 supports three different ways to make web page elements transparent. First of all, you can use the CSS 3 opacity property, which allows you to easily set transparency on an element — for example:

div { opacity: .5; background-color: rgb(255, 0, 0); }

A value of 0 is completely transparent; 1 is completely opaque.

The downside of this is that it applies the transparency to everything inside that element, including text and background colours. This may not be what you wanted; an easy way to get around this and apply the transparency only to the desired part of the element is to set the relevant colour using a colour value that includes an alpha channel. You can do this using an RGBA colour value, like so:

div { background-color: rgba(255, 0, 0, 0.5); }

Or you can use a HSLA value, like so:

div { background-color: hsla(240, 100%, 50%, 0.5); }