28

I have a background on a page body that is an image which I want to show through the first level of divs but not the second

<body>
      <div style='opacity:0.9;'><p>This is a wrapper that shows some of the background</p>
          <div style='background-color:#fff;'><p>This is a child div that I want to be all white</p>
          </div>
      </div>
</body>

Obviously the second level div picks up the opacity of .9 as well is there a way to override this?

Brian
  • 4,328
  • 13
  • 58
  • 103
  • This should help. http://css-tricks.com/non-transparent-elements-inside-transparent-elements/ – anuj_io Apr 04 '12 at 05:02
  • 3
    The simple answer is no: you need to find ways around it. – BoltClock Apr 04 '12 at 05:05
  • possible duplicate of [I do not want to inherit the child opacity from the parent in CSS](http://stackoverflow.com/questions/5770341/i-do-not-want-to-inherit-the-child-opacity-from-the-parent-in-css) – T J Mar 24 '14 at 11:48

2 Answers2

38

Hi you can do as like this

You can define parent opicity

and child as like you

ex.

css

.parent{
    padding:20px;
    background:rgba(112,81,246,0.3);
}
.child{
    padding:20px;
    background:rgba(112,81,246,0.6);
}
​

HTML

<div class="parent">
<div class="child">Hello i m child</div>
</div>​

Live demo here http://jsfiddle.net/rohitazad/PC4sL/

Rohit Azad Malik
  • 31,410
  • 17
  • 69
  • 97
-2

Any of these should get you started:

Answer 1

Answer 2

Dean Meehan
  • 2,511
  • 22
  • 36
cereallarceny
  • 4,913
  • 4
  • 39
  • 74
  • None of the links is available anymore. Exemplary case for always quoting “the most relevant part of an important link, in case the external resource is unreachable or goes permanently offline” https://stackoverflow.com/help/how-to-answer – alpipego Jun 18 '22 at 19:18