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:
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!