The opacity CSS property specifies the transparency of an element.
Cross Browser Opacity
Opacity is now a part of the CSS3 specifications, but it was present for a long time. However, older browsers have different ways of controlling the opacity or transparency.
CSS Opacity in Firefox, Safari, Chrome, Opera and IE9
Here is the most up to date syntax for CSS opacity in all current browsers.
The above style rule will make the paragraph element 70% opaque (or 30% transparent).
The opacity property takes a value a value from 0.0 to 1.0. A setting of
opacity: 1; would make the element completely opaque (i.e. 0% transparent), whereas
opacity: 0; would make the element completely transparent (i.e. 100% transparent).
CSS Opacity in Internet Explorer 8 and lower
Internet Explorer 8 and earlier version supports a Microsoft-only property "alpha filter" to control the transparency of an element.
zoom: 1; /* Fix for IE7 */
Note:Alpha filters in IE accept values from
100. The value
0 makes the element completely transparent (i.e. 100% transparent), whereas the value
100 makes the element completely opaque (i.e. 0% transparent).
CSS Opacity for All Browser
Combining the both steps above you will get the opacity for all browsers.
opacity: 0.5; /* Opacity for Modern Browsers */
filter: alpha(opacity=50); /* Opacity for IE8 and lower */
zoom: 1; /* Fix for IE7 */
Warning:Including alpha filter to control transparency in Internet Explorer 8 and lower versions creates invalid code in your style sheet since this is a Microsoft-only property, not a standard CSS property.
CSS Image Opacity
You can also make transparent images using CSS Opacity.
The three images in the illustration below are all from the same source image. The only differences between them are the level of their opacity.
Change Image Opacity on Mouse Over
The following example demonstrates a common use of CSS image opacity, where the opacity of images changes when the user moves the mouse pointer over an image.
— Move your mouse pointer over the images to see the effect.
Text in Transparent Box
When using opacity on an element not only the background of the element that will have transparency, but all of its child elements become transparent as well. It is making the text inside the transparent element hard to read if the value of opacity becomes higher.
border: 1px solid #949781;
CSS Transparency Using RGBA
In addition to RGB CSS3 has introduced a new way RGBA to specify a color that includes alpha transparency as part of the color value. RGBA stands for Red Blue Green Alpha.
The RGBA declaration is a very easy way to set transparency for a color.
background: rgba(200, 54, 54, 0.5);
color: rgba(200, 54, 54, 0.25);
The first three numbers representing the color in RGB values i.e. red (0-255), green (0-255), blue (0-255) and the fourth representing alpha transparency value between 0 to 1 (0 makes the color fully transparent , whereas the value of 1 makes it fully opaque).
One important characteristic to note about the RGBA transparency is that — the ability to control the opacity of individual color. With RGBA, we can make the text color of an element transparent and leave background intact.
— Or leave the text color alone and change only the transparency of background.
You can see how easily you can control the opacity of individual colors rather than the entire element using RGBA. However it is always recommended to define a fallback color for the browsers that do not support the RGBA colors.
Note:The RGBA transparency doesn't affect the child elements the way the
opacity property does. The alpha value of RGBA affects the transparency of individual color rather than the entire element.
Declaring a Fallback Color
All browsers do not support RGBA colors. However, you can provide an alternative such as solid colors or transparent PNG images for the browsers that don't support it.
/* 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);