CSS：防止不透明元素中颜色的汇总

Question

CSS：防止不透明元素中颜色的汇总

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

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

- michalv

2

你尝试过CSS混合模式吗？（请参见https://css-tricks.com/basics-css-blend-modes/中“任意HTML元素混合模式”后的示例）？ - Ilya Streltsyn

3个回答

0

您可以使用 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:

- Tushar

z-index对我来说不是解决方案 - 在某些情况下，我必须使用不透明度。 - michalv

0

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

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

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

- piouson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mechanicals · Accepted Answer

如果你想让所有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中使用它。