不透明度和覆盖：算法

Question

我需要创建一个与一些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是单个级别的不透明度

(感谢天才朋友)

- Oscar Fanelli

---

如果你已经解决了这个问题，能否将解决方案添加为答案（然后接受它）？ - andrewsi

Answer 1

解决方案：

最终不透明度 = 1 - (1-op1)(1-op2) 或 op1+op2-op1*op2 log 0.01 = x*log op 其中，op是单个级别的不透明度。

- Oscar Fanelli

---

我不理解这个方程式。你能解释一下下面的“或”语句和对应的对数方程吗？ - bozdoz

Answer 2

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

以下是一些原型设计的良好起点：

CSS：

#contain {position:relative;}
#actual-black {background-color:black}

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

HTML：

<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>​

尝试使用不同数量的透明div和它们的不透明度。设置一个新类（例如“overlap2”）并对其应用不同的不透明度等。

如果有一种适用于所有浏览器的“算法”来处理这个问题，我会感到惊讶，但我真的很感兴趣结果（并希望我错了，这实际上是可以预测的），所以请分享你的发现。

- Sepster

Answer 3

发现你的问题很有趣。我不是数学家或物理专家，只是猜测。

我们能否说两个div的重叠将导致一个重叠区域，其不透明度是两个div的不透明度之和。所以如果

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

如果有4个以上的div重叠在它们上面，如果加起来超过1，那么意味着组合重叠区域将完全变黑。

或者，我建议您也将问题放在programer.stackexchage.com上，那里的人们简直就是热爱算法 :)

好吧，也许不是这样。我创建了一个简单的jsFiddle。这里已经有人做了，无论如何我会给你这个链接。 http://jsfiddle.net/gHjrN/

在这里，我创建了四个具有不同透明度的div。它们的透明度总和远远超过1.0，但它们的集体重叠还没有变成纯黑色。顺便问一下，为什么您要寻找算法，浏览器似乎可以自己完成:D

好的，我找到了一些链接，您可能会发现有用 opacity of overlapping partially transparent elements。计算出的不透明度可以是1-(D1的不透明度X D2的不透明度)

- Shades88

---

哦，是的，我做了一个 jsFiddle：http://jsfiddle.net/XcUVL/ 我认为它是这样的 1 -（D1 的不透明度 X D2 的不透明度）... 我会做一个反向算法并发布 id :) 非常感谢！ - Oscar Fanelli

不行！出问题了！ 1-(0.50.5) = 0.75，但是1-(0.750.75) = 0.46……两个不透明度级别中更高的不透明度会导致更少的不透明度吗？ - Oscar Fanelli