Alpha Colors and Opacity

Chapter 12 4 mins

Learning outcomes:

  1. What is alpha-filtering
  2. What is opacity

Where in the previous Adding Colors chapter we took at quick look at representing solid colors in CSS, now we will explore alpha-filtered colors together with the property opacity. This chapter is simply an extension to the previous chapter and won't be at all difficult to handle. Let's begin

What is alpha-filtering

Don't get scared from the strange name of an extremely simple concept in CSS colors known as alpha filtering.

When applied to a given color the alpha filter simple makes the color transparent to a given extent. As a consequence any color behind an alpha color gets mixed with it together giving a new color.

Recall that to represent a color in CSS we can use any of the following choices: a colorname, hex notation, rgb(), or hsl(). Excluding the first option of colornames which can only represent solid colors, all these notations can take another parameter to denote a value for the alpha filter.

Thus we get #RGBA or #RRGGBBAA notations instead of the normal #RGB and #RRGGBB respectively for hexadecimal values. Quite the same also goes for rgb() and hsl(). Both the functions have equivalent rgba() and hsla() functions to denote a value for alpha as well.

In hexadecimal notation, like all the other parameters, alpha characters can be in the range 0-9 or a-f. However in rgba() and hsla() the forth alpha parameter can only be a ratio or a percentage value.

For instance rgba(0, 0, 0, 0.9) and its equivalent rgba(0, 0, 0, 90%) are valid colors in the dictionary of CSS. Following are a handful of examples demonstrating different alpha-filtered colors.

div {
    background-color: rgba(0, 0, 0, 0.5);
    /* make the black color a bit lighter */
}

As we said earlier, alpha colors are see-through (when the alpha parameter is less than 1) which means that two overlapping elements with alpha backgrounds will give an intersecting region. See the example below to get the idea:

div {
    height: 100px;
    width: 150px;
    background-color: rgba(0, 0, 0, 0.1);
}
#div2 {
    margin-top: -15px;
}
#div1
#div2
Here we have used a new property margin-top. It gives the margins of an element from its respective sides - top in this case. We will discover margins in great detail in the CSS Margins chapter.

This is in effect almost all the understanding you need to know for alpha colors in CSS. What we are left with now is visually seeing the effects of alpha colors in actual web pages.

Opacity

The concept of opacity, brought about by the property opacity, works very similar to the way alpha filtering algorithms work, except for that it applies to whole elements, whereas alpha filters apply only to colors.

It serves to make things look lighter, close to the transparent region. opacity can either take a ratio or a percentage value (denoted by the % sign) just like the alpha parameters in the functions rgba() and hsla(). The lower the value, the lower its opacity and hence the more lighter it is.

0 is no opacity i.e completely transparent. 1 is full opacity i.e not at all transparent.

We can apply opacity to anything we like for example images, text, complete blocks of elements with all these and so on.