Color Percepción de cajas semi-translucentes apiladas

cuando dos cajas semi-translucentes se apilan entre sí, el color percibido de las capas combinadas diferirá en función del orden en el que están organizados. Para comprender la razón detrás de este fenómeno, profundicemos en el concepto de opacidad en CSS.

La opacidad define la transparencia de un elemento, que va de 0 (totalmente transparente) a 1 (completamente opaca). En el ejemplo dado, el CSS para los cuadros semi-translúcidos define la opacidad como 0.5, lo que indica que cada capa tiene una transparencia del 50%.

cuando la capa con un fondo rojo se coloca encima del fondo azul, el ojo percibe una combinación de 50% azul desde la capa inferior y 25% roja de la capa superior. Esto se debe a que la transparencia del 50% de la capa superior permite que se muestre la mitad del color de la capa inferior.

Sin embargo, cuando el orden se invierte, con el fondo azul en la parte superior, el ojo encuentra una combinación de 50% rojo desde la capa inferior y 25% azul de la capa superior. Este cambio en las proporciones da como resultado un color percibido diferente.

logrando un color consistente

para garantizar el mismo color percibido independientemente del orden en que se apilen las cajas, es necesario mantener la misma proporción de color para ambas capas. En el ejemplo proporcionado, esto se puede lograr ajustando los valores de opacidad de la siguiente manera:

para la capa interna (que contiene el color sólido):

opacity: 0.25;

para la capa exterior (contiene el color semi-transparente):

opacity: 0.333;