CSS：防止对不透明元素进行求和

Question

我有3个重叠的html div，一个在另一个旁边，有颜色：红色，绿色和蓝色。所有元素的不透明度为0.5。前两个div（红色和绿色）我想总结颜色（在红色和绿色之间创建一些东西） - 标准行为，这里没有变化。

我的问题是如何防止只在绿色和蓝色div之间汇总颜色？ 如果我们能够在没有其他元素的情况下做到这一点，那就太棒了。

HTML：

<div id="d0"></div>
<div id="d1"></div>
<div id="d2"></div>

的CSS：

div {
  position: absolute;
  opacity: 0.5;
}

#d0 {
  top: 60px;
  height: 100px;
  left: 50px;
  width: 100px;
  background-color: red;
}

#d1 {
  height: 150px;
  left: 130px;
  top: 50px;
  width: 200px;
  background-color: green;
}

#d2 {
  height: 100px;
  left: 300px;
  top: 80px;
  width: 120px;
  background-color: blue;
}

编辑：

我忘记了：http://plnkr.co/edit/5MIduRMFo0dZ54xqzpAa?p=preview

它应该看起来像这样（第四个元素是显示蓝色也有不透明度）：

Answer 1

如果你想保持所有div的不透明度仍为0.5。那么这是你的纯CSS解决方案。没有添加其他元素。

这是一个小提琴。

http://jsfiddle.net/tdh7ks2x/2/

**HTML**

<div id="d0"></div>
<div id="d1"></div>
<div id="d2"></div>
<div id="d4"></div>


**CSS**

#d2 {
   opacity: 1;
   height: 100px;
   width: 120px;
   left: 300px;
   top: 80px;
}
#d2:before, 
#d2:after{
   content: "";
   position :absolute;
   left: 0;
   top: 0;
   height: 100px;
   background-color: blue;
}
#d2:before{
   width: 30px;
   z-index: 2;
   opacity: 0.99999999;
   background-color: #7F7FFF;
}
#d2:after{
   width: 120px;
   z-index: 1;
   opacity: 0.5;
}

#d4 {
   width: 200px;
   height: 80px;
   left: 400px;
   top: 90px;
   background-color: red;
}

刚刚添加了这个CSS而不是＃d2，休息所有的CSS都没问题。如果这可以解决您的问题，请与我们联系。

选择不透明度的div颜色，并在“：before”div中使用它。

Answer 2

您可以使用z-index属性将div带到前面或后面。 z-index的值越高，将其移至顶部并减小以将其移回。

此外，您已使用opacity:0.5，因此您将在交叉点看到背景颜色。你必须增加不透明度才能看到那里的确切颜色

div {
  position: absolute;
  opacity: 0.5;
}

#d0 {
  top: 60px;
  height: 100px;
  left: 50px;
  width: 100px;
  background-color: red;
  z-index:2
}

#d1 {
  height: 150px;
  left: 130px;
  top: 50px;
  width: 200px;
  background-color: green;

  
}

#d2 {
  height: 100px;
  left: 300px;
  top: 80px;
  width: 120px;
  background-color: blue;
}

<div id="d0"></div>
<div id="d1"></div>
<div id="d2"></div>
css:

Answer 3

基本上，这个问题是由于透明颜色重叠造成的。示例是 rgba(255,255,255,0.3) 与 rgba(255,255,255,0.3) 重叠以形成更亮的颜色。

如果您的设计可以不用透明颜色，您可以通过将透明颜色 (rgba) 转换为相关元素的完全不透明颜色 (hex) 来轻松解决此问题。

您将需要背景颜色来帮助从 hex 计算完全不透明的 rgba，或者在渲染后仅使用颜色选择器浏览器扩展。