我在一个div里面定义了一个div，外面的div有一定的不透明度，这导致z-index高于它容器的内部元素显得暗淡。有没有办法不让内部div显得暗淡甚至尽管外部 div 是 div。
这是代码
<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>
我知道实现预期结果的一种方法是不将内部 div 放在外部 div 中。然后通过保持位置，顶部，左侧等将包含文本的div放置在容器div之上。但这里的问题是容器的高度不会根据文本的长度增加，因为包含文本的div不在容器的div内。
可以在这里进行输出和编辑https://jsfiddle.net/sum1/av6r0aug/
最佳答案
每当您不想将不透明度应用于内部子项时，请改用 rgba在背景色上。
为什么？
因为根据 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.
所以，请看下面的片段:
#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>关于css - 保持内部元素的 CSS 不透明度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28673351/