CSS：防止在不透明元素中求和颜色答案

【问题标题】：CSS: Prevent summing color in opacited elementsCSS：防止在不透明元素中求和颜色
【发布时间】：2021-07-13 17:57:25
【问题描述】：

我有 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

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

【问题讨论】：

您是否尝试过 CSS 混合模式（参见 css-tricks.com/basics-css-blend-modes 中“任意 HTML 元素混合模式”之后的示例）？

标签： html css

【解决方案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 中使用它。

【讨论】：

它看起来更好，但不幸的是它不能解决我的问题 - 我希望 #d2:before 不覆盖不透明度 1，但像以前一样，0.5。我用图片编辑了问题以显示我想要实现的目标。
@michalv：看看这个：jsfiddle.net/tdh7ks2x/2这应该可以解决你的问题。我还在上面的答案中更新了上面的小提琴链接。

【解决方案2】：

您可以使用z-index 属性将 div 带到 front 或 back。较高的 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:

【讨论】：

z-index 不是我的解决方案 - 在某些情况下我必须不透明

【解决方案3】：

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

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

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

【讨论】：