How Does Transparency Affect the Final Color in Overlapping Semi-Transparent Boxes?

Transparency Impact on Color in Stacked Semi-Transparent Boxes

When multiple semi-transparent layers overlap, their colors combine to create a new hue. The resulting color can vary depending on the order in which the layers are stacked. This is because the opacity of the top layer affects the color of the bottom layer.

For example, a semi-transparent red box stacked on top of a semi-transparent blue box will produce a different color compared to a semi-transparent blue box stacked on top of a semi-transparent red box. In the first case, the red box blocks 50% of the light, allowing only 50% of the blue to show through. This results in a more purple hue. In the second case, the blue box blocks 50% of the light, revealing only 25% of the red color. This creates a lighter purple hue.

To maintain consistency in color regardless of stacking order, ensure that each layer contributes the same proportion of color. Here's an adjustment to the CSS provided in the question:

.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);
}

In this revised example, the opacity of the top layer (0.25) is 75% of the bottom layer's opacity (0.333). This ensures that the color proportion remains the same regardless of stacking order.

The above is the detailed content of How Does Transparency Affect the Final Color in Overlapping Semi-Transparent Boxes?. For more information, please follow other related articles on the PHP Chinese website!