Css 不透明度和覆盖：算法

我必须创建一个系统来处理一些div和它们的不透明度

我将直接介绍一些例子；所有div都是黑色的： -我有两个div，它们重叠。div具有不透明度X和X，因此重叠区域将产生不透明度1

• 我有10个div，它们重叠。div具有不透明度x1，x2，x10和所有div的重叠区域将产生不透明度1。9（10）个div的重叠区域将比10个div的重叠区域更透明，以此类推

如何做到这一点？我需要一个算法，给我每个div的“X”不透明度参数

谢谢大家

解决了

最终不透明度=1-（1-op1）（1-op2）或op1+op2-op1*op2

log 0.01=x*log op

其中op是单个标高的不透明度

---

（感谢一位天才朋友）

发现你的问题很有趣。我不是数学家，也不是什么物理专家，所以只是猜测而已

我们可以说，两个div的重叠将导致一个重叠区域，其不透明度是两个div不透明度的相加。所以如果

D1's opacity = 0.1 
and 
D2's opacity = 0.2 
their overlap opacity = 0.3. (can it be?)

所以，如果4个以上的div重叠，如果加法超过1，则意味着组合重叠区域将完全为黑色

或者，我可以建议你也把你的问题放到programmer.stackexhage.com上，那里的人只是喜欢算法：）

好吧，也许不是那样的。我创建了一个简单的JSFIDLE。这里已经有人了，无论如何我会给你这个链接

在这里，我创建了四个不同不透明度的div。它们的总不透明度达到了1.0以上，但它们的总体重叠仍然不是黑色。顺便说一句，你为什么要搜索一个算法，浏览器似乎是自己做的：D

---

好的，我找到了一些你可能会觉得有用的链接。计算的不透明度可能是

1-（D1的不透明度X D2的不透明度）

我不确定我是否完全理解这个问题，但如果我是你，我会设置一个JSFIDLE来测试这个问题

类似于这一点的东西将是一些原型的良好起点：

CSS:

HTML:

背景是不透明的黑色
这是透明的黑色
这是透明的黑色
这是透明的黑色
这是透明的黑色
​

播放不同数量的透明div，以及它们的不透明度。设置一个新类（如“重叠2”）并对其应用不同的不透明度，等等

如果有一种“算法”可以在所有浏览器中使用，但我对结果非常感兴趣（希望我错了，这是可以预测的），我会感到惊讶，所以请发布您的发现。

解决方案：

最终不透明度=1-（1-op1）（1-op2）或op1+op2-op1*op2

log 0.01=x*log op

---

其中op是单个级别的不透明度

哦，是的，我做了一个jsFiddle：我想是1-（D1的不透明度X D2的不透明度）。。。我将做一个反向算法，我将张贴id:）非常感谢！不有个问题！1-（0,5*0,5）=0,75，但1-（0,75*0,75）=0,46。。。。不透明度越低，两个级别的透明度越高？如果你已经解决了这个问题，你能添加这个解决方案作为答案吗（然后接受它）？我不理解这个等式。你能解释一下

或
语句，以及下面的对数方程吗？
#contain {position:relative;}
#actual-black {background-color:black}

.overlap {
    position:absolute;top:1em;left:0;
    background-color:black; opacity:0.2;
}

<div id="contain">
<div id="actual-black">The background is opaque black</div>
<div class="overlap">This is transparent black</div>
<div class="overlap">This is transparent black</div>
<div class="overlap">This is transparent black</div>
<div class="overlap">This is transparent black</div>
</div>​