Opacity of div’s background without affecting contained element in IE 8?

by

The opacity style affects the whole element and everything within it. The correct answer to this is to use an rgba background colour instead.

The CSS is fairly simple:

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

…where the first three numbers are the red, green and blue values for your background colour, and the fourth is the ‘alpha’ channel value, which works the same way as the opacity value.

See this page for more info: http://css-tricks.com/rgba-browser-support/

The down-side, is that this doesn’t work in IE8 or lower. The page I linked above also lists a few other browsers it doesn’t work in, but they’re all very old by now; all browsers in current use except IE6/7/8 will work with rgba colours.

The good news is that you can force IE to work with this as well, using a hack called CSS3Pie. CSS3Pie adds a number of modern CSS3 features to older versions of IE, including rgba background colours.

To use CSS3Pie for backgrounds, you need to add a specific -pie-background declaration to your CSS, as well as the PIE behavior style, so your stylesheet would end up looking like this:

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

Hope that helps.

[EDIT]

For what it’s worth, as others have mentioned, you can use IE’s filter style, with the gradient keyword. The CSS3Pie solution does actually use this same technique behind the scenes, but removes the need for you to mess around directly with IE’s filters, so your stylesheets are much cleaner. (it also adds a whole bunch of other nice features too, but that’s not relevant to this discussion)

More Related Contents:

  1. Opacity CSS not working in IE8
  2. Set opacity of background image without affecting child elements
  3. Using CSS for a fade-in effect on page load
  4. CSS opacity only to background color, not the text on it? [duplicate]
  5. Opacity of background-color, but not the text [duplicate]
  6. Is there any way to hover over one element and affect a different element? [duplicate]
  7. How to set opacity in parent div and not affect in child div? [duplicate]
  8. What has bigger priority: opacity or z-index in browsers?
  9. CSS background opacity with rgba not working in IE 8
  10. IE8 display inline-block not working
  11. Should I use single or double colon notation for pseudo-elements?
  12. How to make Internet Explorer 8 to support nth child() CSS element?
  13. IE8 :nth-child and :before
  14. Can you set a border opacity in CSS?
  15. How does one target IE7 and IE8 with valid CSS?
  16. image moves on hover – chrome opacity issue
  17. Does IE 8 have a limit on number of stylesheets per page?
  18. How to remove dotted border around active hyperlinks in IE8 with CSS
  19. :active css selector not working for IE8 and IE9
  20. CSS rounded corners in IE8
  21. Background images: how to fill whole div if image is small and vice versa
  22. IE7, IE8 support for css3 media query [duplicate]
  23. how to cancel opacity for a child element?
  24. word-wrap:break-word not working in IE8
  25. Can I do knock-out/punch-through transparency with CSS fonts?
  26. IE CSS Bug: background-color: transparent behaves differently to background-color: (any other colour)
  27. with an inner not triggering :active state in IE 8
  28. how to handle ‘double opacity’ of two overlapping divs
  29. z-index is canceled by setting transform(rotate)
  30. Create a row of flexbox items with a max height defined by one child [duplicate]

Leave a Comment