Question

我必须创建一个使用某些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是单级

的不透明度

（感谢天才朋友）

Answer 1

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

我们可以说两个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上，那里的人只是爱algorigthms :)。

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

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

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

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”）并对其应用不同的不透明度等......

如果有一个“算法”来处理这个适用于所有浏览器的“算法”，我会感到惊讶，但我真的对结果感兴趣（希望我错了，这实际上是可以预测的）所以请你发布你的帖子找到。

Answer 3

解决方案：

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

log 0.01 = x * log op

其中op是单级

的不透明度

不透明度和叠加：算法

3 个答案: