Transparent Colors

So far, all our colors have been opaque: nothing shows through them. But a color can also be partly transparent. Then whatever is behind it shows through, as through tinted glass.

Transparency is set by a fourth value, called alpha. Alpha is a number from 0 (fully transparent, invisible) to 1 (fully opaque); it can also be written in percent, from 0% to 100%. Decimal numbers in CSS are written with a dot: 0.5. In RGB, alpha is the fourth number, and the function is then usually called rgba (a for alpha):

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

This is a half-transparent red: half of what is behind it shows through. The other formats can have an alpha too:

• In HSL, it is also the fourth value: hsla(0, 100%, 50%, 0.5).
• In hex, it is a fourth pair of characters, from 00 (transparent) to ff (opaque): #ff000080 (80 = 128, about half of 255).

Today, rgb and hsl accept an alpha too, so the extra a is no longer needed. You may also come across a newer way of writing them, with spaces and a slash before the alpha: rgb(255 0 0 / 50%). All these give practically the same half-transparent red.

A transparent color is useful for a light tint that matches the colors around it. We will give the div with the breeds a background in the green of our headings with an alpha of 0.2: the green covers only a fifth, and the rest is the light page background showing through.

Notice that the background fits tightly around the text, which touches its edges. In the lesson on the box model, we will learn to add space inside an element.