Opacity and Blending: Algorithm

Question

I need to create a system that works with some div and their opacity.

I will pass on to some examples; all divs are black: - I have 2 divs and they overlap. Divs have opacity X and X, so the overlap area will have opacity 1.

• I have 10 divs and they overlap. Divs have opacity x1, x2, ..., x10, and the overlap area of ​​all divs will have opacity 1. The overlap area of ​​9 (out of 10) divs will be more transparent than the overlap area of ​​10 divs, and so on ...

How to do it? I need an algorithm that gives me an opacity parameter of "X" for each div.

Thanks to everyone.

SOLVE!

final opacity = 1- (1-op1) (1-op2) or op1 + op2-op1 * op2

log 0.01 = x * log op

where op is the opacity of a single level

(thanks to a brilliant friend)

Answer 1

Decision:

final opacity = 1- (1-op1) (1-op2) or op1 + op2-op1 * op2

log 0.01 = x * log op

where op is the opacity of a single level

Answer 2

Found your problem interesting. I'm not a mathematician or some kind of expert physicist, so I just think.

Is it possible to say that the overlap of two divs will lead to an overlap area, the opacity of which is to add two opacity divs. Therefore, if

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

So, if 4 more divs are superimposed on them, if the addition reaches more than 1, this will mean that the combined overlap area will be completely black.

Alternatively, I can suggest you put your problem on programer.stackexchage.com too, people there just love algorithms :)

Well, maybe that doesn't work out that way. I created a simple jsFiddle. Someone here already has one way or another I will give you this link. http://jsfiddle.net/gHjrN/

Here I created four divs with different opacity. Their opacity has reached levels above 1.0, but still their collective overlap is not yet black. By the way, why are you looking for an algorithm, browsers seem to do it themselves: D

Well, I found a link that may prove useful opacity of overlapping partially transparent elements . The calculated opacity can be 1-(D1 opacity X D2 opacity)

Answer 3

Not sure if I fully understand the question, but if I were you, I would install jsFiddle to check this out.

Something along the lines of this would be a good starting point for some prototypes:

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

Play with a different number of transparent divs and opacity on them. Set up a new class (for example, "overlap2") and apply different opacities to it, etc.

I will be surprised if there is an “algorithm” for handling this that works in all browsers, but I am really interested in the results (and I hope that I am wrong and that it is actually predictable), so please write what you find.