CSS Opacity

The CSS opacity property indicates how transparent an element is. The syntax for setting the opacity of an element is,

opacity: <value>;

where <value> is between 0 and 1. 1 indicates that the element is a solid and not transparent at all, while 0 indicates that the element is fully transparent. The figures below show different opacity levels for the red background color.

When an opacity is set for an element, all child elements inherit the same opacity value.

Most modern browsers support the opacity property, with the exception of Internet Explorer 8 or earlier versions of IE. To make sure visitors who are using older IE browsers can view opacity properly, add the following to your CSS:

filter: alpha (opacity = <ie_value>)

where <ie_value> is a number between 0 and 100, with 0 being fully transparent and 100 being a solid.

Opacity can also be set when color is specified. This is done when you use either the RGBa or the HSLa format to specify the color. Opacity can be specified in these two formats as follows,

RGBa:

{color: rgba (X, Y, Z, A); }   where X, Y, and Z are numbers between 0 and 255, and A is a number between 0 and 1.
    OR
{color: rgba (X%, Y%, Z%, A); }   where X, Y, and Z are numbers between 0 and 100, and A is a number between 0 and 1.

HSLa:

{color: hsla (X, Y%, Z%, A); }   where X is a number between 0 and 360, Y and Z are numbers between 0 and 100, and A is a number between 0 and 1.

In both cases, A is equivalent to <value> in the CSS opacity syntax.

It is not possible to specify opacity when using RGB, HSL, hexadecimal code, or color name to define color.