CSS3 has enabled us to use a lot of effects to design on the web. One that I want to look at today is transparency. Look at the image on the right. In this example, the main content section is white, with a 60% transparency effect added. This is particularly useful when using a full page cover image for your background.

Let’s look at that a bit more in-depth. In this example, the <main> tag is given a background-color attribute to set it to white. You can, of course, do this by setting background-color:#FFF; and opacity:0.6;, but when you do it this way, anything — text included — inside the main tag also becomes translucent. This is, obviously, not what we want.

Instead, we can use rgba(255,255,255,0.6) to specify white and 60% opacity for the background color only. Any text or images placed inside the main tags will remain opaque.

Here’s what the CSS would look like:

body {
	background: url(images/big_picture.jpg) no-repeat center center fixed;
	background-size:cover;
}

main {
	background-color:rgba(255,255,255,0.60);
}