Opacity is included in the CSS3 specs now, but it's been around for quite some time. Older browsers use different methods to handle opacity or transparency.
This is the most current syntax for CSS opacity in all modern browsers.
p {
opacity: 0.7;
}This style rule will make the paragraph element 70% opaque (or 30% see-through).
The opacity property can take values ranging from 0.0 to 1.0. A setting of opacity: 1; makes the element fully opaque (0% transparent), while opacity: 0; makes it fully transparent (100% transparent).
Internet Explorer 8 and older versions use a Microsoft-specific property called "alpha filter" to adjust an element's transparency.
p {
filter: alpha(opacity=50);
zoom: 1; /* Fix for IE7 */
}Note: Alpha filters in IE take values from 0 to 100. A value of 0 makes the element fully transparent (100% transparent), while 100 makes it fully opaque (0% transparent).
By combining the steps above, you can achieve 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: Using the alpha filter to manage transparency in Internet Explorer 8 and earlier creates invalid code in your style sheet as it is a Microsoft-specific property, not a standard CSS property.
You can also create transparent images using CSS Opacity.
The three images below are from the same source. The only difference is their opacity levels.
 |
|
|
opacity:1 |
opacity:0.5 |
opacity:0.25 |
The following example shows a common use of CSS image opacity, where the opacity of images changes when the user hovers over an image.
 |
 |
 |
— Hover your mouse pointer over the images to see the effect.
When you apply opacity to an element, not only does the background become transparent, but all its child elements also become see-through. This can make the text inside the transparent element hard to read if the opacity value is too high.
| OPACITY | OPACITY | OPACITY | OPACITY |
To avoid this, you can use transparent PNG images, or place the text outside the transparent box and use negative margin or CSS positioning to move it visually inside.
div {
float: left;
opacity: 0.7;
border: 1px solid #949781;
}
p {
float: left;
position: relative;
margin-left: -400px;
}Along with RGB, CSS3 introduced RGBA, which allows you to specify a color with alpha transparency. RGBA stands for Red Green Blue Alpha.
The RGBA declaration makes it easy to set transparency for a color.
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 (red 0-255, green 0-255, blue 0-255), and the fourth number represents the alpha transparency value between 0 and 1 (0 is fully transparent, 1 is fully opaque).
An important feature of RGBA transparency is the ability to control the opacity of individual colors. With RGBA, you can make an element's text color transparent while keeping the background unchanged.
| RGBA | RGBA | RGBA | RGBA |
— Or keep the text color unchanged and only adjust the background transparency.
| RGBA | RGBA | RGBA | RGBA |
Using RGBA, you can easily control the opacity of individual colors instead of the whole element. However, it's a good practice to define a fallback color for browsers that do not support RGBA colors.
Note: RGBA transparency does not affect child elements the same way the opacity property does. The alpha value in RGBA affects the transparency of the individual color, not the whole element.
Not all browsers support RGBA colors. However, you can provide alternatives like solid colors or transparent PNG images for browsers that don't support RGBA.
p {
/* Fallback for web browsers that don't support RGBA */
background: rgb(0, 0, 0);
/* RGBA with 0.5 opacity */
background: rgba(0, 0, 0, 0.5);
}Warning: Internet Explorer 8 and earlier versions do not support RGBA colors. They use the gradient filter to achieve the RGBA effect, which is deprecated.