Color of stacked semi-transparent boxes depends on order?

transparent box css
transparent color code
background-color transparent css
css change background image color
css add color overlay to image
image hover background color css
background image opacity on hover
css image fade to transparent

Why does the final color of two stacked semi-translucent boxes depend on the order?

How could I make it so that I get the same color in both cases?

.a {
  background-color: rgba(255, 0, 0, 0.5)
}

.b {
  background-color: rgba(0, 0, 255, 0.5)
}
<span class="a"><span class="b">          Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>

Simply because in both cases the combination of colors is not the same due to how opacity of the top layer affect the color of the bottom layer.

For the first case, you see 50% of blue and 50% of transparent in the top layer. Through the transparent part, you see 50% of red color in the bottom layer (so we only see 25% of red in total). Same logic for the second case (50% of red and 25% of blue); thus you will see different colors because for both cases we don't have the same proportion.

To avoid this you need to have the same proportion for both your colors.

Here is an example to better illustrate and show how we can obtain same color:

In the top layer (the inner span) we have 0.25 of opacity (so we have 25% of the first color and 75% of transparent) then for the bottom layer (the outer span) we have 0.333 opacity (so we have 1/3 of 75% = 25% of the color and the remaining is transparent). We have the same proportion in both layers (25%) so we see the same color even if we reverse the order of layers.

.a {
  background-color: rgba(255, 0, 0, 0.333)
}

.b {
  background-color: rgba(0, 0, 255, 0.333)
}

.a > .b {
  background-color: rgba(0, 0, 255, 0.25)
}
.b > .a {
  background-color: rgba(255, 0, 0, 0.25)
}
<span class="a"><span class="b">          Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>

Color of stacked semi-transparent boxes depends on order?, Why does the final color of two stacked semi-translucent boxes depend on the order? How could I make it so that I get the same color in both cases? .a  Why does the final color of two stacked semi-translucent boxes depend on the order?How could I make it so that I get the same color in both cases?

You can use the css property, mix-blend-mode : multiply (limited browser support)

.a {
  background-color: rgba(255, 0, 0, 0.5);
  mix-blend-mode: multiply;
}

.b {
  background-color: rgba(0, 0, 255, 0.5);
  mix-blend-mode: multiply;
}

.c {
  position: relative;
  left: 0px;
  width: 50px;
  height: 50px;
}

.d {
  position: relative;
  left: 25px;
  top: -50px;
  width: 50px;
  height: 50px;
}
<span class="a"><span class="b">          Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>

<div class="c a"></div>
<div class="d b"></div>

<div class="c b"></div>
<div class="d a"></div>

Making semi-transparent colors on top of solid colors just like any , A quess: You are frustrated because making a box transparent also makes its color to look out washed. You want the transparency but also the  78 Color of stacked semi-transparent boxes depends on order? May 28 '18. 63 JAXB: How to marshal objects in lists? Sep 10 '10.

Tinted Images with Multiple Backgrounds, If we layer a transparent color over an image, we can “tint” that image. that color to come through, because background-opacity isn't a thing. to the rule where they can't come first (be top) in the stacking order. Frontend Masters has a full CSS learning path with multiple courses depending on how you  38 Color of stacked semi-transparent boxes depends on order? May 28 '18. 15 Create Git Repo with New Project in Visual Studio 2019 May 7 '19.

For explanation of what happens, see Temani Afif's answer. As an alternative solution, you can take one span, a for instance, position it and give it a lower z-index if it's inside b. Then the stacking will always be the same: b is drawn on top of a in the first line, and a is drawn underneath b in the second.

.a {
  background-color: rgba(255, 0, 0, 0.5);
}

.b {
  background-color: rgba(0, 0, 255, 0.5);
}

.b .a {position:relative; z-index:-1;}
<span class="a"><span class="b">     Color 1</span></span>
<span class="b"><span class="a">Same Color 2</span></span>

CSS Transparency Settings for All Browsers, Alpha(Opacity=50)"; /* This works in IE 8 & 9 too */ /* but also 5, 6, 7 */ filter: alpha(opacity=50); /* Older than Firefox 0.9 */ -moz-opacity:0.5; /* Safari 1.x (pre  Temani Afif. Computer Engineer & Expert Web Developer Apply some CSS in order to read the above! 93 Color of stacked semi-transparent boxes depends on order

Introduction to Layers and Masks, Layers are part of the document which may or may not be transparent, they may Krita takes all these layers in its layer stack, including the special effects and The layer order can be changed or layers can be moved in and out of a group in To remove an already existing color label you can click on the 'x' marked box in​  Color of stacked semi-transparent boxes depends on order? html css background background-color overlapping. 2019-11-09. How to add different background colors between

CSS Color Module Level 3, When filing an issue, please put the text “css-color-3” in the title, Initial: depends on user agent Opacity can be thought of as a postprocessing operation. it cannot be layered in z-order between pieces of content inside of it. must create a new stacking context for any element with opacity less than 1. Apply some CSS in order to read the above! 93 Color of stacked semi-transparent boxes depends on order? 81 Change text size and color incrementally;

Inkscape tutorial: Basic, Depending on your screen resolution, the Commands bar with general command buttons, come up with a blue fill and a black stroke (outline), and fully opaque. Probably the simplest way to paint an object some color is to select an object, and The term z-order refers to the stacking order of objects in a drawing, i.e. to​  We make Stack Overflow and 170+ other community-powered Q&A sites. Color of stacked semi-transparent boxes depends on order? Change text size and color

Comments
  • I don't know the answer to the question, but the same thing happens in photoshop and it's something that I've accepted for years as just being part of computer color theory. I'll look around to see if I can find any more information.
  • For what its worth, the same thing happens in real life for anything that is not 100% transparent and is lit from the front. More light from the front object gets to your eye, thus its color has greater effect on the final color even if both have 50% transparency.
  • @YAHsaves: The average of 0 and 100 is 50 (step 1). The average of 50 and 150 is 100 (step 2). Compare this to: the average of 150 and 0 is 75 (step 1). The average of 75 and 100 is 87.5 (step 2). The issue is that the three numbers are not being weighted correctly. An average needs to be calculated based on all the numbers at the same time; you can't just recursively calculate the average step by step. (Note that the average calculcation is essentially a 50% transparency calculation. The calculation changes for different transparency levels, but the principle remains the same)
  • Lessons learned: with 'mix-blend-mode: multiply' I will get a color independent of the stacking order - that's what I was initially looking for! I think @Moffens answer is most useful to any other user facing the same problem. But the explanations of Temani Afif actually apply to my question and describe why HTML behaves the other way (it mimics physical light propagation through semi-transparent foils), so the green tick goes to him.
  • Upvoted, but it doesn't elegantly solve the problem. (Could just use the latter half of the code.)
  • @ChrisHappy am not solving the problem ;) am explaining .. the explanation is sometimes better than the fix
  • @YAHsaves the problem will occur even if we use multiple background or any thing that make the two color above each other (using absolute position or not) ;)
  • If you want to add a TLDR, it would be that they are multiplicative instead of additive.
  • @Caramiriel: "multiplicative" would still doesn't explain why the operation isn't commutative.
  • Just about any color blending mode from this list which is "commutative" will do the trick.
  • Interesting, this works with Chrome but not with Edge (as of the latest Windows 10 update).
  • @rmv why would you expect anything other than overlay / normal? What is the expected color if you position an opaque blue box in front of a red box? It will be blue instead of red or function of blue & red.
  • @Moffen Perfect answer, but could you please add an explanation for why this works, and why the original code didn't?
  • @rmv: What the "normal" mixing mode most closely imitates is actually paint mixing. For example, if you take some white paint, replace half of it with red paint and then replace half of the resulting pink paint with blue paint, you'll end up with a bluish purple (25% white, 25% red, 50% blue). If you start with the same white paint but first replace half of it with blue and then half of the result with red, you'll end up with a reddish purple (25% white, 25% blue, 50% red) instead.