将内部div不透明度设置为1，但不受影响
将内部div不透明度设置为1，但不受影响
提问于 2015-01-07 11:46:17
我有一个带有背景图像和背景色的div。我做了这个div 0.7的不透明度。在那之后，我在这个div里面做了一个内部div，但是我不想给这个不透明。
这是我的css代码：
#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;
}它不起作用，内部div也受到外部div的不透明度的影响。我怎么能这么做？
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-01-07 11:48:10
当然了。父元素的不透明度为0.7，因此内部的每个元素都会看到opacity: 1与父元素的不透明度相等。
#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>
要解决这个问题，请将#inner元素移到#outer元素之外，并将其放置在#outer元素的顶部。
#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>
显然，您可能希望将#inner和#outer重命名为在这种情况下更相关的内容。
Stack Overflow用户
发布于 2015-01-07 11:54:37
在CSS中，父母的不透明度会影响所有孩子的不透明度。对孩子们的任何影响都会被堆放在上面。例如：
<div style="opacity: 0.5">
<div style="opacity: 0.5"></div>
</div>第一个div的不透明度为0.5 (或50%的透明度)。
第二个div将具有0.5 * 0.5或0.25不透明度(25%透明)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27818804
复制相关文章
相似问题
腾讯云开发者
