27

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,130
  • 13
  • 55
  • 98
  • 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

35

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
  • 30,330
  • 17
  • 61
  • 93
0

Any of these should get you started:

Answer 1

Answer 2

Dean Meehan
  • 2,391
  • 19
  • 34
cereallarceny
  • 4,828
  • 3
  • 36
  • 74