Make background transparent without affecting contents

Question

I have a complicated structure that goes like this:

<div class="container">
   <div class="heading">
       <!-- more <div>'s -->
   </div>
   <div class="inner">
       <!-- more <div>'s -->
   </div>
   <div class="footer">
       <!-- more <div>'s -->
   </div>
</div>

My goal is to make the background of .container transparent at 90%. However, I need its contents (text, images, etc.) to remain fully opaque . I know it's a challenging task, but I tried the following:

.container {background: #fff; opacity: 0.9;}
.heading, .inner, .footer {opacity: 1.0;}

as well as the following:

.container, .heading, .inner, .footer {background: rgba(255,255,255,0.9);}

The problem with #1 is that ALL descendants of .container become transparent and resetting their opacity just does not work. In my #2 attempt, I set transparency of every div using rgba , but the problem is that child divs are being set transparent in relation to their parents ; as a result, I do not get a "uniform" transparency across all divs.

Since neither opacity nor rgba seem to be reasonable, I feel the following might work:

<div class="container">
   <div class="transparent"></div>
   <div class="heading">
      <!-- more <div>'s -->
   </div>
   ...

Then, play with position and height of .transparent so that every other div in container goes on top of it.

Can anyone please help me figure this out or possibly suggest a better solution to my problem?

Answer 1

remove the opacity stuff and run only this:

.container {
    background: rgba(255,255,255,0.1);
}

Answer 2

What you had first tried works for me:

 body {background: green; } .container {background: #fff; opacity: 0.9;} .heading, .inner, .footer {opacity: 1.0; background:#000; border: 1px solid red; width: 100px; height: 100px;} 

  <div class="container"> <div class="heading"> <!-- more <div>'s --> </div> <div class="inner"> <!-- more <div>'s --> </div> <div class="footer"> <!-- more <div>'s --> </div> </div> 

I added some color so it would be more apparent what's going on.

Answer 3

Just setting background-color to .container should work without influencing it's descendants' backgrounds. By default, background-color is transparent , so if you don't have anything set specifically for the descendants, then they'll be transparent thus appearing to inherit background-color . I have set the background-colors individually to each element and a few of them have not applied a background-color , it should be obvious which ones they are.

SNIPPET

 .container { outline: 5px dotted red; background: rgba(0, 0, 0, 0.1); } .heading, .inner, .footer { outline: 3px dashed blue; width: 50%; } .heading { margin: 0 auto; background: yellow; } .footer { margin-left: 50%; background: lime; } .heading div, .inner div, .footer div { outline: 1px solid black; width: 25%; } div > div > div:nth-child(4n-1) + div { margin-left: 25%; } div > div > div:nth-child(2n+1) { margin-left: 50%; } div > div > div:nth-child(3n-5) { margin-left: 75%; } div > div > div:nth-child(3n-2) { background: red; } div > div > div:nth-child(3n-1) +div { background: black; color: white; } div > div > div:nth-child(2n-6) { background: blue; } 

 <div class="container"> <div class="heading"> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> </div> <div class="inner"> <div>2</div> <div>2</div> <div>2</div> <div>2</div> <div>2</div> <div>2</div> <div>2</div> <div>2</div> <div>2</div> </div> <div class="footer"> <div>3</div> <div>3</div> <div>3</div> <div>3</div> <div>3</div> <div>3</div> </div> </div>