How to make a Background Transparent but not Text

On a Website (WordPress or other) you may want to use opacity with some content background whilst having the text non-transparent. Until recently there hasn’t been a simple means of doing this; often an image would be used to facilitate making the background semi-transparent/opaque. Not only was this time consuming, but there were also the negative Page load speed implications of using images over CSS or HTML.

CSS3 and Opacity

Fortunately with CSS3 there is a simple way to use CSS to make a background opaque whilst all other elements retain their default opacity value (or no opacity as is usual).

CSS3 RGBA for Background Only Opacity

Here is an example of how to use CSS3 to create a semi-transparent background whilst not making the text transparent (the example illustrates some CSS I used for a WordPress menu recently where I wanted the sub-menu background to be semi-opaque while the text remained non-opaque):

.menu-item ul li{background-color: rgba(245,222,179,0.9);}

You’ll probably notice that all that has been done is to use the RGB colour code (rather than the colour name or hex value) using ‘RGBA’ (the ‘a’ refering to ‘Alpha’) and then adding the level of opacity required as the last value; in this case 0.9).

For backward compatibility, it is worth adding a non RGBA color value prior to the RGBS value. For browsers that don’t support CSS3 RGBA, the colour defined prior to the RGBA value will be shown e.g.

.menu-item ul li {background-color:wheat; background-color: rgba(245,222,179,0.9);}

Simple!