<!doctype>
<html>
<head>
<style>
div {
background:rgba(0,255,255,0.3);
}
#div1 {
width:300px;
height:300px;
}
#div2 {
width:200px;
height:200px;
}
</style>
</head>
<body>
<div id="div1"><div id="div2"></div></div><br/>
</body>
What exactly is the calculated opacity of div2? I am puzzled. It's a mysterious value that isn't 0.3 + 0.3 or 0.3 + 0.3 * 0.3
The total of alpha channels is determined by the following calculation:
alpha_top + alpha_bottom * (1 - alpha_top) =
0.3 + 0.3 * (1 - 0.3) =
0.3 + 0.3 * 0.7 =
0.3 + 0.21 =
0.51
To delve deeper into this topic, refer to Alpha Compositing @ wikipedia, which provides an explanation of the formula as well.
or
This particular formula was referenced by Bogdan Kuštan and can also be seen in this answer by bwoebi.
When opacity is applied to div{}, the resulting opacity for #div1{} would be .3, and for #div2{} it would be .3 * .3 = .09. This calculation takes into account that #div1 has an opacity value of .3 and #div2, while also having an opacity of .3, will have its opacity multiplied with its parent's opacity.
Here's an interesting math problem for you to solve:
(0.3 + 0.3) - (0.3 * 0.3) = 0.51
What makes this calculation unique is that you first need to add overlapping transparency values and then subtract their multiplication. It may seem random, like the conversion of letter spacing from PhotoShop to CSS by dividing the PS value by 1000 to get the value in ems. Sometimes these quirks of knowledge just stick with us, even if we can't explain why. Sorry for going off on a tangent there.
My latest project involves developing a straightforward single-page application that allows users to sort entries by name and other attributes. What I want to achieve is a method of storing the current sorting selection (similar to PHP Get) without navig ...
I am facing an issue with validating an HTML page using jQuery. Despite having a simple layout, the textboxes are not being validated. Here is the code snippet: <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javas ...
I have a div <div id="page"> </div> Containing the following css code: #page { background: url('images/white-zigzag.png') repeat-x; } @media (max-width: 600px) { #page { background: url('images/white-zi ...
Here's my question - can sweetalert2 be set to only appear once per page? So that it remembers if it has already shown the alert. Swal.fire({ title: 'Do you want to save the changes?', showDenyButton: true, showCancelButton: true, ...
How can I utilize two database connections on a single page in PHP? Here is my code: $conn = mysql_connect("","",""); mysql_select_db("",$conn); $db = mysql_connect("","",""); mysql_select_db("",$db); $sql = mysql_query("SELECT * FROM Client_table WHERE ...
Issue I am facing a challenge in aligning blocks to the left within a centered wrapper that has a dynamic width. Despite trying only HTML and CSS, I have been unsuccessful in achieving this. To see an example of what I am dealing with, you can view this ...
I need assistance with adding a transition time to my JavaScript toggle class function. I had previously coded it but have now forgotten how to do so. Any guidance would be highly appreciated. <!DOCTYPE html> <html> <head> <style typ ...
I'm in the process of linking two projects, one using reactJS and the other NodeJS. Currently, NodeJS is running smoothly on localhost:3000. Next, I want to call a React application which redirects to port localhost:3001. How can I seamlessly connect ...
When attempting to convert my scss files to css files using gulp, I encountered an issue. After writing the scss code, it is easily converted to css. However, I wanted to minify this css and save it in a different folder called 'min'. Within the ...
How can I locate and click this button in my Selenium Webdriver window? I usually use find_element_by_id, but what other methods can I try? <button role="button" data-testid="uc-accept-all-button" class="sc-gsDKAQ cYtWkK" s ...
I need assistance with manipulating HTML Email templates in my app using a script. The challenge I'm facing is dynamically parsing through the HTML of an email template that is stored as a value from a <textarea> (specifically CodeMirror). The ...
My Svelte application includes a list with items that feature a built-in flip animation when they are moved. Each item also contains an absolutely positioned menu with a z-index of 10. However, when the flip animation is triggered, the menu falls behind th ...
From my database, I am able to create a list of options for users to choose from. Once a selection is made, the values are submitted back to the same page and retrieved using Javascript. Within the same form, there are radio buttons and a multiple selecti ...
My CSS code is functioning properly in Chrome and Safari, but not in Firefox, IE, and Opera when I create the @keyframes rotate {}. It seems that these 4 lines might be causing the issue: animation-duration: 4s; animation-timing-functio ...
I have implemented a unique UL-based dropdown list that I discovered here (specifically the third model) as the foundation for a role-based selection box for my users. To enhance user experience, I am storing their role selection in localStorage so they do ...
Here is some code I am working with: <span id="urlWindow" style="float:right;" value="http://www.mysite.com">Open Url</span> The sizeUrl variable contains the URL However, when using the following code, it doesn't load properly: var s ...
I am utilizing Element UI for my project. How can I dynamically change the color of the rate cell value in the table? I want the color to be red when rate is less than 0, and green when it is greater than or equal to 0. I wonder if the table attribute cel ...
I'm struggling with making the image smaller and centering it while keeping its original size. I'm using Bootstrap and need a solution for this issue. How can I make the image centered and shown in its original size? <div class="contain ...
When utilizing ASP.NET MVC 5, I encountered an issue within my view where I am attempting to incorporate "Edit | Delete" functionality within a table. Strangely, I am able to generate a hyperlink for the Edit function, but not for the Delete function. Wit ...
I have encountered an issue with my code where the border does not fill the empty space in the div container when there is only one item li present, but works fine if there are multiple items. The problem can be seen in the image below: https://i.sstatic. ...