Why Do Stacked Semi-Transparent Boxes Show Different Colors Depending on Their Order?

Stacked Semi-Transparent Boxes Exhibit Order-Dependent Color Variation

When stacking two semi-transparent boxes, the final color observed differs based on the order of arrangement. This phenomenon occurs due to the varying combination of colors in each case.

Color Difference Explanation

In the first case, the top box (with 50% opacity) contains blue color and allows the bottom box to contribute 50% red color. Thus, the overall color is a combination of 50% blue and 25% red (as the remaining 50% of red is obscured by the blue).

However, in the second case, the boxes are reversed. Now, the top box has 50% opacity for red and allows the bottom box to contribute 50% blue color. The overall effect is a different combination: 50% red and 25% blue. Since the proportions are not the same, the colors appear different.

Achieving Color Consistency

To obtain the same color regardless of box order, the color proportions in each layer must be identical. In other words, the top layer should allow the same proportion of the bottom layer's color to pass through.

For instance, consider the following setup:

• Top layer: 25% opacity (0.25) blue
• Bottom layer: 33.3% opacity (0.333) red

In this scenario, both layers allow 25% of the other color to show through. Therefore, regardless of the order, the resulting color will be the same (a mixture of 25% blue and 75% transparent).

The above is the detailed content of Why Do Stacked Semi-Transparent Boxes Show Different Colors Depending on Their Order?. For more information, please follow other related articles on the PHP Chinese website!