CSS Opacity

The transparency of an element is specified by the opacity CSS property.

Cross Browser Opacity

Opacity is now a part of the CSS3 specifications. However, older browsers control opacity or transparency in different ways.

CSS Opacity in Firefox, Safari, Chrome, Opera and IE9

Here is the latest syntax for CSS opacity in all current browsers.

Example :

p {
    opacity: 0.7;
}

The style rule mentioned above will make the paragraph element 70% opaque (or 30% transparent). 

The value an opacity property can take ranges from 0.0 to 1.0. You can make an element completely opaque (i.e., 0% transparent) by setting opacity: 1, whereas you can make the element completely transparent (i.e., 100% transparent) by setting opacity: 0.

CSS Opacity in Internet Explorer 8 and lower

Internet Explorer 8 and IE browser's earlier versions support a Microsoft-only property "alpha filter" for controlling an element's transparency.

Example :

p {
    filter: alpha(opacity=50);
    zoom: 1;  /* Fix for IE7 */
}

Note: The values accepted by Alpha filters in IE range from 0 to 100. You can make an element completely transparent (i.e., 100% transparent) by using the value 0, whereas to make an element completely opaque (i.e., 0% transparent), you can use the value 100.

CSS Opacity for All Browser

You can combine both steps mentioned above to get the opacity for all browsers.

p {
    opacity: 0.5;  /* Opacity for Modern Browsers */
    filter: alpha(opacity=50);  /* Opacity for IE8 and lower */
    zoom: 1;  /* Fix for IE7 */
}

Warning: Since the alpha filter is a Microsoft-only property and not a standard CSS property, including an alpha filter to control transparency in Internet Explorer 8 and lower versions can create invalid code in your style sheet. 

CSS Image Opacity

You can use CSS Opacity to make transparent images. For example, the three images below are from the same source image. The only point of differentiation between them is the opacity level.

Change Image Opacity on Mouse Over

The example below illustrates a typical use of CSS image opacity, where an image's opacity changes when the mouse pointer is moved by the user over an image.

Text in Transparent Box

When using opacity on an element, the element's background will have transparency, but all of its child elements also become transparent. Therefore, if the value of opacity becomes higher, it makes the text inside the transparent element hard to read.

You can either use transparent PNG images or put the text block outside of the transparent box and push it visually inside using the negative margin or CSS positioning to prevent it.

Example:

div {
    float: left;
    opacity: 0.7;
    border: 1px solid #949781;
}
p {
    float: left;
    position: relative;
    margin-left: -400px;
}

CSS Transparency Using RGBA 

Apart from RGB, CSS3 has introduced another way, RGBA (Red, Green, Blue, Alpha), for specifying a color that includes alpha transparency as part of the color value. The RGBA declaration is an easy way to set transparency for a color.

Example :

div {
    background: rgba(200, 54, 54, 0.5);
}
p {
    color: rgba(200, 54, 54, 0.25);
}

The first three numbers represent the color in RGB values, that is, red (0-255), green (0-255), blue (0-255), and the fourth represents alpha transparency value between 0 to 1 (you can make the color fully-transparent with the value 0, whereas you can make it fully opaque using the value of 1).

An important characteristic of the RGBA transparency is its ability to control the opacity of the individual color. We can use RGBA to make an element's text color transparent and leave the background intact.

By using RGBA, you can easily control the opacity of individual colors instead of the entire element. However, defining a fallback color for the browsers that do not support the RGBA colors is always recommended.

Note: The child elements are not affected by the RGBA transparency as the way the opacity property does. RGBA's alpha value affects the transparency of individual color instead of the entire element.

Declaring a Fallback Color

RGBA colors are not supported by all browsers. However, an alternative such as solid colors or transparent PNG images can be provided for the browsers that don't support it.

p {
    /* Fallback for web browsers that doesn't support RGBA */
    background: rgb(0, 0, 0);
    /* RGBa with 0.5 opacity */
    background: rgba(0, 0, 0, 0.5);
}

Warning: RGBA colors are not supported by Internet Explorer 8 and earlier versions. They use the gradient filter to achieve the effect of RGBA, which is deprecated.