维护内部元素的CSS不透明度 [英] Maintain CSS Opacity of inner element
问题描述
我有一个div定义在一个div，外部的div有一定的不透明度，这导致内部元素的z-index高于它的容器出现dim.IS有方式，使内部div看起来昏暗甚至虽然外部div是div。
这是代码
; body>
< style>
#cont {background-color：yellow; width：900px; height：900px; margin：auto; padding：40px;位置：相对; }
#top {position：relative;背景颜色：橙色width：100％; padding：10px; }
＃cont1 {background-color：black; width：800px; padding：20px; box-sizing：border-box;位置：相对; z-index：3;不透明度：0.4; }
＃cont1_text {color：white; z-index：4;不透明度：10; padding：20px; top：10px; }
＃cont2 {background-color：blue; width：800px; padding：20px; box-sizing：border-box;位置：相对; z-index：3; }
#butt {position：relative;清除： }
< / style>
< div id =cont>
< div id =cont1>
< div id =cont1_text>
上面代码的最后一行仍然显示数组的长度是4，即使一个元素被删除。
删除方法只是从定义的位置删除值，但位置仍然保持。它就像喝焦炭，饮用后液体消失（删除），但瓶子仍然。这将创建一个洞或在数组中留下一个空白的空间。
< / div>
< / div>
< div id =cont2>
< / div>
< / div>
< / body>
我知道实现所需结果的一种方法是不将内部div放在外部div 。然后包含文本的div放在容器div上面通过保持position，top，left等。但是这里的问题是，容器的高度不会增加，根据文本的长度，因为div包含文本不是在container'd div。
可在此处输出和编辑 https：/ /jsfiddle.net/sum1/av6r0aug/
每当您不想将透明度应用于inner儿童使用，而不是在背景颜色上 rgba 。 p>
为什么？
因为根据 MDN
元素作为一个整体，包括其内容，
即使该值不是由子元素继承。因此，
元素及其包含的子元素都具有相同的不透明度相对于元素的背景的
，即使元素及其子元素具有相对于彼此的
不同的不透明度。
因此，请参阅下面的代码段：
#cont {background -color：yellow; width：900px; height：900px; margin：auto; padding：40px;位置：相对; } #top {position：relative;背景颜色：橙色width：100％; padding：10px; }＃cont1 {background-color：rgba（0，0，0，0.4）; width：800px; padding：20px; box-sizing：border-box;位置：相对; z-index：3; }＃cont1_text {color：white; z-index：4;不透明度：10; padding：20px; top：10px; }＃cont2 {background-color：blue; width：800px; padding：20px; box-sizing：border-box;位置：相对; z-index：3; } #butt {position：relative;清除： }
< div id =cont < div id =cont1> < div id =cont1_text>上面代码的最后一行仍然显示数组的长度为4，即使元素被删除。好吧，删除方法只是从定义的位置删除值，但位置仍然保持。它就像喝焦炭，饮用后液体消失（删除），但瓶子仍然。这会创建一个洞或在数组中留下一个空白的空间。< / div> < / div> < div id =butt> < div id =cont2>< / div> < div id =cont2_text>< / div> < / div>< / div>
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/
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>
这篇关于维护内部元素的CSS不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
