Html CSS：防止在不透明度元素中求和颜色

我有3个重叠的html div，一个接一个，颜色：红色、绿色和蓝色。所有元素的不透明度均为0.5。前两个div（红色和绿色）我想求和颜色（在红色和绿色之间创建一些东西）-标准行为，这里没有更改

我的问题是如何防止只在绿色和蓝色div之间求和颜色？ 如果我们能在没有额外元素的情况下做到这一点，那就太好了

html:

编辑：

我忘了：

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

---

您可以使用

z-index

属性将div带到前面或后面。提高z-index的值可将其移到顶部，降低z-index可将其移回顶部

此外，您还使用了

不透明度：0.5

，因此您将在交叉点处看到背景色。您必须增加不透明度才能看到那里的确切颜色

div{
位置：绝对位置；
不透明度：0.5；
}
#d0{
顶部：60px；
高度：100px；
左：50px；
宽度：100px；
背景色：红色；
z指数：2
}
#d1{
高度：150像素；
左：130像素；
顶部：50px；
宽度：200px；
背景颜色：绿色；
}
#d2{
高度：100px；
左：300px；
顶部：80px；
宽度：120px；
背景颜色：蓝色；
}

css:

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

这是一把小提琴

**HTML**
**CSS**
#d2{
不透明度：1；
高度：100px；
宽度：120px；
左：300px；
顶部：80px；
}
#d2：之前，
#d2：之后{
内容：“；
位置：绝对位置；
左：0；
排名：0；
高度：100px；
背景颜色：蓝色；
}
#d2：之前{
宽度：30px；
z指数：2；
不透明度：0.9999999；
背景色：#7F7FFF；
}
#d2：之后{
宽度：120px；
z指数：1；
不透明度：0.5；
}
#d4{
宽度：200px；
高度：80px；
左：400px；
顶部：90px；
背景色：红色；
}

只是添加了这个CSS而不是#d2，其余所有CSS都很好。让我知道这是否解决了您的问题

---

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

中使用它。您是否尝试过CSS混合模式（请参见“任意HTML元素混合模式”之后的示例）？z-index不是我的解决方案-在某些情况下，我必须具有不透明度。看起来更好，但不幸的是，它并没有解决我的问题——我希望#d2:before不覆盖不透明1，而是像以前一样覆盖0.5。我用图片编辑了这个问题，以显示我想要实现的目标。@michalv:检查这个：这应该可以解决您的问题。我还更新了上面答案中的小提琴链接。

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

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

**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;
}