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.