4

我必须创建一个可以处理某些 div 及其不透明度的系统。

我将直接举一些例子；所有的 div 都是黑色的： - 我有 2 个 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 是单层的不透明度

（感谢一位天才朋友）

4

3 回答 3

1

解决方案：

最终不透明度 = 1-(1-op1)(1-op2) 或 op1+op2-op1*op2

log 0.01 = x*log op

其中 op 是单层的不透明度

于 2012-10-04T21:01:27.207 回答
0

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

我们可以说两个div的重叠会导致一个重叠区域，其不透明度是两个div不透明度的加法。因此，如果

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

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

或者，我是否建议您也将您的问题放在 programer.stackexchage.com 上，那里的人只是喜欢算法 :)

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

在这里，我创建了四个具有不同不透明度的 div。它们的不透明度总和远高于 1.0，但它们的集体重叠仍然不是漆黑的。顺便说一句，您为什么要搜索算法，浏览器似乎自己做：D

好的，我找到了一些链接，您可能会发现重叠部分透明元素的不透明度很有帮助。计算的不透明度可能是1-(D1's opacity X D2's opacity)

于 2012-09-13T14:21:59.123 回答
0

不确定我是否完全理解这个问题，但如果我是你，我会设置一个 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”）并对其应用不同的不透明度等...

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

于 2012-09-13T14:22:03.653 回答