The concept of transparency and the overlay effect: uncovering the formula

Question

The concept of transparency and the overlay effect: uncovering the formula

I am working on developing a unique system that involves utilizing various div elements and adjusting their opacity levels.

Here are some specific examples I am dealing with: envision all the divs being black. - When two divs overlap, each with an opacity of X, the resulting overlap area will have an overall opacity of 1.

Imagine having 10 divs overlapping. These divs have varying opacities - x1, x2, ..., x10. The overlap area where all 10 divs intersect will display an opacity of 1. The overlap areas involving fewer than 10 divs will appear more transparent in comparison.

I am seeking guidance on how to develop an algorithm to determine the optimal "X" opacity parameter for each individual div.

Thank you for your assistance.

SOLVED!

The final opacity formula is calculated as follows: final opacity = 1-(1-op1)(1-op2) or op1+op2-op1*op2.

Another important equation guiding this process is: log 0.01 = x*log(op), where the opacity of the single level (op) plays a crucial role.

This solution was graciously shared by my brilliant friend.

css algorithm html opacity

Answer 1

Answer №1

Solution:

The formula for calculating final opacity is 1-(1-opacity1)(1-opacity2) or opacity1+opacity2-opacity1*opacity2

Given that log 0.01 = x*log(opacity), where opacity is the opacity of the single level.

Answer 2

Solution:

The formula for calculating final opacity is 1-(1-opacity1)(1-opacity2) or opacity1+opacity2-opacity1*opacity2

Given that log 0.01 = x*log(opacity), where opacity is the opacity of the single level.

Answer 3

Answer №2

Having trouble grasping the question completely, but my suggestion would be to create a CodePen or jsFiddle for testing purposes.

You could start with something like this as a base for prototyping:

CSS:

#wrapper {position:relative;}
#black-box {background-color:black}

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

HTML:

<div id="wrapper">
<div id="black-box">The background is solid black</div>
<div class="overlay">This is transparent black</div>
<div class="overlay">This is transparent black</div>
<div class="overlay">This is transparent black</div>
<div class="overlay">This is transparent black</div>
</div>

Experiment with various numbers of transparent divs and their opacities. Create new classes (e.g. "overlay2") with different opacities, etc...

I doubt there's a universal algorithm to handle this that works flawlessly on all browsers, but I'm curious about the outcome (and hoping to be proven wrong about predictability), so please share your findings.

Answer 4

Having trouble grasping the question completely, but my suggestion would be to create a CodePen or jsFiddle for testing purposes.

You could start with something like this as a base for prototyping:

CSS:

#wrapper {position:relative;}
#black-box {background-color:black}

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

HTML:

<div id="wrapper">
<div id="black-box">The background is solid black</div>
<div class="overlay">This is transparent black</div>
<div class="overlay">This is transparent black</div>
<div class="overlay">This is transparent black</div>
<div class="overlay">This is transparent black</div>
</div>

Experiment with various numbers of transparent divs and their opacities. Create new classes (e.g. "overlay2") with different opacities, etc...

I doubt there's a universal algorithm to handle this that works flawlessly on all browsers, but I'm curious about the outcome (and hoping to be proven wrong about predictability), so please share your findings.

Answer 5

Answer №3

Stumbled upon your intriguing problem. While I'm not a math whiz or physics expert, here's my take.

Could it be that when two divs overlap, the resulting opacity in the overlapping area is the sum of the opacities of the two divs? For instance, if

D1's opacity = 0.1 
and 
D2's opacity = 0.2 
their combined overlap opacity = 0.3. (possible scenario?)

If four additional divs overlap with them and their total opacity exceeds 1, does that mean the overlapping area will turn completely black?

Alternatively, have you considered posting your query on programmer.stackexchange.com as well? The community there thrives on algorithms :)

Maybe my theory doesn't hold up. I've set up a simple jsFiddle which someone here might have already done. Nonetheless, here's the link for you to explore: http://jsfiddle.net/gHjrN/

I've created four divs with varying opacities on the fiddle. Despite their opacities adding up to over 1.0, their overlapping area isn't completely black yet. By the way, why the quest for an algorithm when browsers seem to handle it automatically? :D

Oh, I came across a helpful link that could shed some light on your question: opacity of overlapping partially transparent elements. The calculated opacity may be 1-(D1's opacity X D2's opacity)

Answer 6

Stumbled upon your intriguing problem. While I'm not a math whiz or physics expert, here's my take.

Could it be that when two divs overlap, the resulting opacity in the overlapping area is the sum of the opacities of the two divs? For instance, if

D1's opacity = 0.1 
and 
D2's opacity = 0.2 
their combined overlap opacity = 0.3. (possible scenario?)

If four additional divs overlap with them and their total opacity exceeds 1, does that mean the overlapping area will turn completely black?

Alternatively, have you considered posting your query on programmer.stackexchange.com as well? The community there thrives on algorithms :)

Maybe my theory doesn't hold up. I've set up a simple jsFiddle which someone here might have already done. Nonetheless, here's the link for you to explore: http://jsfiddle.net/gHjrN/

I've created four divs with varying opacities on the fiddle. Despite their opacities adding up to over 1.0, their overlapping area isn't completely black yet. By the way, why the quest for an algorithm when browsers seem to handle it automatically? :D

Oh, I came across a helpful link that could shed some light on your question: opacity of overlapping partially transparent elements. The calculated opacity may be 1-(D1's opacity X D2's opacity)

The concept of transparency and the overlay effect: uncovering the formula

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way for me to align my div with my header on the same line?

What is the best way to create a form with two inputs that redirects me to a different page based on the inputs chosen?

Reduce the number of divs on a webpage while incorporating animated transitions

What are some ways to improve the precision of longitude and latitude data?

Modify the class's height by utilizing props

Which option offers superior performance: using attributes through HTML or jQuery?

The JavaScript code created in CodePen doesn't seem to function properly when integrated into my website

Incorporating mousewheel functionality by utilizing DOMmouseScroll and mousewheel to trigger functions

Incorporate JavaScript values into an HTML form to submit them to PHP

Delete the HTML line break

Adding color to characters, digits in an HTML file

When the "change" event listener is added to an input element, the innerHTML is updated as the value increases but not when it decreases

Proper handling of retrieving POST method data on the current page

Initiating the ngOnInit lifecycle hook in child components within Angular

What are the steps for populating a table cell with data using AJAX, MySQL, and PHP in the given situation?

Develop a C# application that scans for specific HTML links and saves the extracted results into an Excel spreadsheet

I cannot seem to receive the confirmation of success!

Error message: When the mouse hovers over, display the chart(.js) results in TypeError: t is

Upon calling the createModalAddPost() function, a single window is triggered to open

Enter the value into the AngularJS textbox