Maintain CSS Opacity of inner element

问题

I have a div defined inside a div, the outer div has certain opacity, this leads to the inner-element whose z-index is higher than it's container appear dim.IS there way to not make the inner div appear dim even though the outer div is div.

Here's the code

<body>
<style>
  #cont{ background-color:yellow; width:900px; height:900px; margin:auto; padding:40px; position:relative;   }

 #top{ position:relative; background-color:orange; width:100%; padding:10px; }

 #cont1{ background-color:black; width:800px;  padding:20px; box-sizing:border-box; position:relative; z-index:3; opacity:0.4;  }

 #cont1_text{color:white; z-index:4; opacity:10; padding:20px; top:10px; }

 #cont2{ background-color:blue; width:800px; padding:20px; box-sizing:border-box; position:relative; z-index:3; }

 #butt{ position:relative; clear:both; }

</style>
 <div id="cont">

  <div id="cont1">
            <div id="cont1_text"> 

    The Last line of above code still shows the length of the array is 4, even though a element is deleted.HOW??
    Well, the delete method just deletes the value from the defined position but the position still remains.It’s just like drinking coke, the liquid is gone after drinking(deleting) but the bottle remains. This creates a hole or leaves an empty space in the array.

    </div>
   </div>

    <div id="cont2">
    </div>
</div>
</body>

The one way I know of achieving the desired result is by not placing the inner div inside the outer div. Then the div containing text is placed above container div by maintaining position, top, left etc.But the problem here is that the container's height will not increase according to the length of text as div containing text is not inside the container'd div.

The output and edit can be made here https://jsfiddle.net/sum1/av6r0aug/

回答1:

whenever you don't want to apply the opacity to inner child use instead rgba on background-color.

why?

because in opacity according to MDN

The value applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, an element and its contained children all have the same opacity relative to the element's background, even if the element and its children have different opacities relative to one another.

So, see snippet below:

  #cont {
    background-color: yellow;
    width: 900px;
    height: 900px;
    margin: auto;
    padding: 40px;
    position: relative;
  }
  #top {
    position: relative;
    background-color: orange;
    width: 100%;
    padding: 10px;
  }
  #cont1 {
    background-color: rgba(0, 0, 0, 0.4);
    width: 800px;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 3;
  }
  #cont1_text {
    color: white;
    z-index: 4;
    opacity: 10;
    padding: 20px;
    top: 10px;
  }
  #cont2 {
    background-color: blue;
    width: 800px;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 3;
  }
  #butt {
    position: relative;
    clear: both;
  }

<div id="cont">
  <div id="cont1">
    <div id="cont1_text">The Last line of above code still shows the length of the array is 4, even though a element is deleted.HOW?? Well, the delete method just deletes the value from the defined position but the position still remains.It’s just like drinking coke, the
      liquid is gone after drinking(deleting) but the bottle remains. This creates a hole or leaves an empty space in the array.</div>
  </div>
  <div id="butt">
    <div id="cont2"></div>
    <div id="cont2_text"></div>
  </div>
</div>

来源：https://stackoverflow.com/questions/28673351/maintain-css-opacity-of-inner-element

标签

css

css3