Setting inner div opacity to 1, but not effected

Question

i have a div with a backround image and also background color. I made the opacity of this div 0.7. After that, i made an inner div inside of this div, but i dont want to give opacity to this one.

This is my css code:

#outer{
position:relative; 
box-shadow: 10px 10px 5px #888888; 
border-radius: 25px;
opacity: 0.7;
border-style:inset; 
border-width: 2px; 
margin:auto; 
width: 1000px; 
height:inherit; 
background-color: rgba(255, 255, 255, 0.4);
background-image:url(../Content/Images/Logo.png);
background-size: 770px 680px;
background-repeat: no-repeat;
display: block;
margin-left: auto;
margin-right: auto;
background-position: center;
}

#inner{
position: absolute;
opacity: 1;
background-color: red;
width: 100px;
height: 100px;
}

Its not working, the inner div is also effected by the opacity of the outer div. How can i do that?

Answer 1

Of course. Your parent has an opacity of 0.7, so every element inside will see opacity: 1 being equal to the opacity of the parent.

#outer, #inner {
  height: 100px;
  padding: 20px;
  width: 100px;
}

#outer {
  background: #000;
  opacity: 0.7;
}

#inner {
  background: #f00;
  opacity: 1.0;
}

<div id="outer">
  <div id="inner"></div>
</div>

To get around this, move your #inner element outside of your #outer element and position it on top of the #outer element.

#wrapper {
  position: relative;
}

#outer, #inner {
  height: 100px;
  padding: 20px;
  width: 100px;
}

#outer {
  background: #000;
  opacity: 0.7;
}

#inner {
  background: #f00;
  position: absolute;
  top: 20px;  /* These values are based on the padding to offset correctly. */
  left: 20px;
}

<div id="wrapper">
  <div id="outer"></div>
  <div id="inner"></div>
</div>

Obviously you'd probably want to rename #inner and #outer to something more relevant in this situation.