将内部div不透明度设置为1，但不受影响

Question

我有一个背景图像和背景颜色的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的不透明度影响。我怎么能这样做？

Answer 1

当然。您的父级的不透明度为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重命名为在这种情况下更相关的内容。

Answer 2

在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％透明度）。