HTML & CSS: Opacity and Transparency

Transparency and opacity are both measures of how opaque or how "visible" something is. Transparency is a measure of how transparent something is, whereas opacity is a measure of how opaque something is – they both operate on the same spectrum, but it's worth remembering that 100% transparency will be fully invisible, while 100% opacity will be fully "visible" - they are essentially both the same scale, with one being the invert of the other (this knowledge isn't really necessary for this tutorial, but it's worth knowing anyway).

Transparency in web design/development is often admirable (whether this is for aesthetic reasons or for actual functionality), and in this tutorial we'll be talking about some different methods of achieving transparent effects using HTML and CSS.

Opacity

So the first way of achieving transparency that we're going to talk about in this tutorial is quite simply the opacity CSS property that was introduced in CSS3. This, very simply, creates an easy way to set the opacity of an element and its children in CSS, in which the value of 0.0 makes an element and its children fully transparent, and the value of 1.0 makes an element and its children fully opaque. So if you wanted to create a basic division that contained a message with a purpose of being slightly transparent somewhat show the contents behind it, you could use some CSS like the following:

1
2
3
4
5
6
7
8
9
10

#box {
	width: 230px; /* The width */
	height: 130px; /* The height */
	padding: 10px; /* Some padding */
	border: 1px solid black; /* A border (for style) */
	text-align: center; /* Center aligned text */
	color: white; /* White text colour */
	background: black; /* A grey background */
	opacity: 0.8; /* 80% opacity */
}

To which the accompanying HTML would look something like the following:

1
2
3

<div id="box">
	Hello!
</div>

This technique of using opacity is very effective, however does have some drawbacks. One (to me, minor) drawback is that this modern property will not function properly in browsers versions prior to Firefox 0.9, Safari 2, Opera 9, and IE 9. This can be fixed in a number of ways – in some versions of Firefox prior to 0.9, the vendor prefixed -moz-opacity: 0.8; property can achieve opacity, in Safari 1.X versions, -khtml-opacity: 0.8; will do the trick, and in IE 5+, the following special IE 'filter' should work: filter: alpha(opacity=80); (although IE being IE, this doesn't work all the time in IE 5-7 and you may need to add another property to trigger "hasLayout" in IE, if you're curious, zoom: 1; should do the trick).

Not supporting these older browsers, which the web has reasonably low percentages of, is not, however, in my eyes a big deal (especially because all they should lose is a bit of transparency). The real drawback to opacity is also its greatest strength -- it effects the selected element and its children. This means that if you just want a division with a slightly transparent background, the content of that division will take the same opacity you assigned to the division. As such, other methods of transparency can be favoured in certain situations, although opacity remains strong for a big chunk of usage.

RGBA

RGBA is a way to express colours using CSS while also giving the colour a level of "alpha transparency" (hence the 'A'). It functions just as RGB does, in which comma-separated values are specified within brackets, however also adds a fourth thing which needs to be passed to it, which is of course this level of transparency.

This functionality of adding transparency to colours themselves allows for things like transparent backgrounds without the knock-on effect to an element's children. So if we required a basic black (rgb(0, 0, 0)) division with 80% opacity, we could write something like the following. Note that although the alpha transparency is called "transparency", it actually functions on an opacity scale in which 0.0 is fully transparent and 1.0 is fully opaque.

1
2
3
4
5
6
7
8
9

#box {
	width: 230px; /* The width */
	height: 130px; /* The height */
	padding: 10px; /* Some padding */
	border: 1px solid black; /* A border (for style) */
	text-align: center; /* Center aligned text */
	color: white; /* White text colour */
	background: rgba(0, 0, 0, 0.8); /* An 80% opaque black background */
}

The HTML snippet to accompany this would be the same as the example used for opacity. In fact, this division would function almost exactly the same as the previous styling in the opacity section of this tutorial, however any children of the "box" element in this example would not inherit the opacity – so while the text inside the box in the previous example will have changed opacity with the box, this text will remain fully opaque as the box alpha transparency changes in this example.

RGBA, like opacity, is also from the CSS3 specification, however the browser support isn't too bad. It won't work in Firefox 2.X and down, Safari 2.X and down, Opera 9.X and down, and IE 8 and down, however fallbacks for (most of) these are very easy to implement. Luckily for us, RGBA transparency is usually just an addition to the page, and so a regular colour can be used as a fallback. In our box example we could just use the regular RGB colour as a fallback that the browser can use if it doesn't know what rgba means:

1
2
3
4
5
6
7
8
9
10

#box {
	width: 230px; /* The width */
	height: 130px; /* The height */
	padding: 10px; /* Some padding */
	border: 1px solid black; /* A border (for style) */
	text-align: center; /* Center aligned text */
	color: white; /* White text colour */
	background: rgb(0, 0, 0); /* A black background -- fallback */
	background: rgba(0, 0, 0, 0.8); /* An 80% opaque black background */
}

This fallback will work in the majority of browsers, although if you still intend to support versions of IE less than 5.5, then not only are you crazy, but the fallback won't work properly. There is another filter fallback for IE on this one, however I'm not going to cover it here – if you're interested, check out Chris Coyier's CSS-Tricks article on RGBA.