Question

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

简单地说，我要问的是，即使重叠，如何确保颜色与两个div一致。我做了一个codepen来显示问题所在（绿色更深） 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>

Answer 1

将div1和div2放入容器中并将opacity: 0.6应用于该容器。

＆＃13;

.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
}

＆＃13;

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

＆＃13;

Answer 2

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

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

覆盖不合格的不透明度

2 个答案: