How do I set opacity for div backgrounds without affecting contained elements in IE 8?

How to Set Opacity for Div Backgrounds Without Altering Contained Elements in IE 8

When attempting to apply opacity to the background of a div element without affecting its contained elements in IE 8, the following methods often fail:

• Using the opacity CSS property: This affects both the div and its contents.
• Using png images with opacity: This is not a dynamic solution.

Solution

Instead, utilize the rgba() CSS function to specify the background color, including an alpha channel for opacity:

.myelement {
    background: rgba(200, 54, 54, 0.5);
}

For IE8 Compatibility

To support older versions of IE, consider using CSS3Pie, which adds rgba support to IE. Modified stylesheet:

.myelement {
    background: rgba(200, 54, 54, 0.5);
    -pie-background: rgba(200, 54, 54, 0.5);
    behavior: url(PIE.htc);
}

Alternate Method for IE Filters

IE filters can also be used with the gradient keyword:

.myelement {
    filter: gradient(startColorstr='#990000', endColorstr='#990000', GradientType=0);
    opacity: 0.5;
}

Note that the opacity value cannot be specified through the filter property directly in IE.

The above is the detailed content of How do I set opacity for div backgrounds without affecting contained elements in IE 8?. For more information, please follow other related articles on the PHP Chinese website!