how to cancel opacity for a child element?

by

The opacity of the child will always be the opacity of the parent if the opacity of the child is 1.

This is not a problem with inheritance, but rather with the way opacity is calculated.

For instance, 

<div id="parent">
    <div></div>
</div>

<div id="original">
</div>

<div id="quarter">
</div>

#parent div, #quarter {
    width: 100px;
    height: 100px;
    background-color: orange;
}

#parent div {
    opacity: 0.5;
}

#parent {
    opacity: 0.5;
}

#quarter {
    opacity: 0.25;
}

#quarter‘s opacity, from your perspective, is the same as that of #parent div, but in actual fact, #parent div has twice the opacity of #quarter. See this jsfiddle for more detail: http://jsfiddle.net/HUaNm/

The only way to avoid this is to move the child out of the parent. Alternatively, depending on what you want here, you can also use rgba colors for the background/border/font color of the parent instead of opacity, but the effect is not the same as applying opacity.

More Related Contents:

  1. Set opacity of background image without affecting child elements
  2. Using CSS for a fade-in effect on page load
  3. CSS opacity only to background color, not the text on it? [duplicate]
  4. Opacity CSS not working in IE8
  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. Opacity of div’s background without affecting contained element in IE 8?
  10. Can you set a border opacity in CSS?
  11. image moves on hover – chrome opacity issue
  12. Background images: how to fill whole div if image is small and vice versa
  13. Can I do knock-out/punch-through transparency with CSS fonts?
  14. how to handle ‘double opacity’ of two overlapping divs
  15. Center content in responsive bootstrap navbar
  16. How to combine class and ID in CSS selector?
  17. What is the difference between auto-fill and auto-fit?
  18. Create leading dots in CSS
  19. CSS3 animation not working in safari
  20. Should I use single or double colon notation for pseudo-elements?
  21. Passing parameters to css animation
  22. @Media min-width & max-width
  23. Creating CSS Global Variables : Stylesheet theme management [duplicate]
  24. Browser support for CSS :first-child and :last-child
  25. Adjacent divs with angled borders? [duplicate]
  26. How do I include a font awesome icon in my svg?
  27. Force refresh of cached CSS data
  28. CSS combinator precedence?
  29. How to control number of items per row using media queries in Flexbox?
  30. How can I delay the start of a CSS animation?

Leave a Comment