NOTE: If you set opacity on an element it will affect all its child elements.

To set an opacity just on the background of an element you will have to use RGBA colors. 


/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);

/* RGBa with 0.2 opacity */
background-color: rgba(0, 0, 0, 0.2);

/* For IE 5.5 - 7*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);

/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,

Example from CSS Notes for Professionals book


Leave a reply

Your email address will not be published. required fields are marked *