How to Set Opacity of a Div Background without Affecting Contained Elements in IE8?

Setting Opacity of Div Background without Impacting Contained Elements in IE 8

Setting opacity for a div's background while preserving the appearance of its contained elements can be challenging in Internet Explorer 8. The commonly used opacity property affects both the div and its contents.

rgba Background Color

The recommended solution is to utilize an rgba background color, where the "a" channel represents the opacity. This approach works well in most modern browsers but is not supported in IE8 and lower.

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

CSS3Pie Hack for IE

To achieve opacity support in IE8, you can employ CSS3Pie, a tool that mimics CSS3 features in older browsers. It introduces the -pie-background property, which should be used in conjunction with the behavior attribute.

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

IE's Filter Style

Alternatively, you can leverage IE's filter style with the gradient keyword. This approach is used internally by CSS3Pie.

.myDiv {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33CCFF', endColorstr='#000000', GradientType=1);
}

While this technique requires more specific syntax, it provides a fallback option for browsers that don't support rgba.

The above is the detailed content of How to Set Opacity of a Div Background without Affecting Contained Elements in IE8?. For more information, please follow other related articles on the PHP Chinese website!