Divs 取消的叠加不透明度答案

【问题标题】：Overlaying Opacity of Divs cancellationDivs 取消的叠加不透明度
【发布时间】：2017-02-08 12:17:45
【问题描述】：

我正在尝试覆盖两个具有半透明背景（相同颜色）的 div。我如何确保当它们叠加时不透明度不会相互叠加？

简单地说，我要问的是如何确保颜色在两个 div 中保持一致，即使在重叠时也是如此。我制作了一个代码笔来显示问题所在（绿色较暗的地方） Codepen

<style>
.div1{    
  background-color: rgba(20,101,20,0.5);
  height: 100px;
  width: 100px;
}
.div2{    
  background-color: rgba(20,101,20,0.5);
  height: 100px;
  width: 100px;
  position: relative;
  top: -10px
}
</style>

<div class="div1"></div>
<div class="div2"></div>

【问题讨论】：

您可以不使用不透明度并设置实际颜色值 -> codepen.io/Unused/pen/ZpJoLW 不确定这是否可能，因为这取决于您的为什么在颜色中使用不透明度。
使用#8AB28A，它看起来与您使用的颜色-不透明度组合相同......正如斯科特所说，如果您使用的是opacity，则当它们重叠时无法防止“问题” .
您可以通过JS检查叠加层的重叠以确定一致性。 time2hack.com/2016/03/checking-overlap-between-elements.html
这有帮助吗？ stackoverflow.com/questions/8746860/…
我明白你在说什么@Scott 和 Kukkuz，但是在我使用它的情况下，在两个当前 div 后面有第二个 div，它有一个背景图像，非常坚固不能使用颜色。

标签： html css transparency overlap

【解决方案1】：

希望这篇文章对你有帮助，它有一个很好的教程给你

http://cssnerd.com/2012/01/07/overlapping-transparent-divs-with-one-border/

【讨论】：

【解决方案2】：

将div1 和div2 放在一个容器中，然后将opacity: 0.6 应用于它。

.container{
  opacity: 0.6;
}
.div1{    
  background-color: rgba(20,101,20,1);
  height: 100px;
  width: 100px;
}
.div2{    
  background-color: rgba(20,101,20,1);
  height: 100px;
  width: 100px;
  position: relative;
  top: -10px
}

<div class="container">
<div class="div1"></div>
<div class="div2"></div>
</div>

【讨论】：