Home > Web Front-end > CSS Tutorial > How do I set opacity for div backgrounds without affecting contained elements in IE 8?

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

Linda Hamilton
Release: 2024-11-09 04:13:02
Original
850 people have browsed it

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);
}
Copy after login

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);
}
Copy after login

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;
}
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template