Alpha channel colours

In opacity.html find the opacity line and comment it and the colour line above it out:

/* color:rgb(0,0,255);
opacity:0.5; */

Then just under them add a colour definition with alpha channel (note that it is now rgba):

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

The page should not change visually.

As you know there are three primary light colours and mixing them can create any other colour.  You can also add a fourth "channel" to this colour definition which is called the alpha channel.  This defines how opaque the colour is without using opacity.  This for example:

color:rgb(255,0,0);
opacity:0.5;

does the same job as this:

color:rgba(255,0,0,0.5);

The choice of which to use depends on whether you want an entire object to be partially opaque or just one colour.