Perception des couleurs des boîtes semi-translucentes empilées

lorsque deux boîtes semi-translucentes sont empilées les unes aux autres, la couleur perçue des couches combinées diffèrera sur l'ordre dans lequel ils sont organisés. Pour comprendre la raison de ce phénomène, plongeons le concept d'opacité dans CSS.

Opacité définit la transparence d'un élément, allant de 0 (entièrement transparent) à 1 (entièrement opaque). Dans l'exemple donné, le CSS pour les boîtes semi-translucentes définit l'opacité comme 0,5, indiquant que chaque couche a une transparence de 50%.

Lorsque la couche avec un fond rouge est placée sur le dessus de l'arrière-plan bleu, l'œil perçoit une combinaison de 50% de bleu de la couche inférieure et de 25% rouge de la couche supérieure. En effet, la transparence de 50% de la couche supérieure permet à la moitié de la couleur de la couche inférieure de montrer.

Cependant, lorsque l'ordre est inversé, avec l'arrière-plan bleu sur le dessus, l'œil rencontre une combinaison de 50% rouge de la couche inférieure et de 25% bleu de la couche supérieure. Ce décalage dans les proportions entraîne une couleur perçue différente.

Atteindre une couleur cohérente

pour garantir la même couleur perçue quel que soit l'ordre dans lequel les boîtes sont empilées, il est nécessaire de maintenir la même proportion de couleur pour les deux couches. In the provided example, this can be achieved by adjusting the opacity values ​​as follows:

For the inner layer (containing the solid color):

opacity: 0.25;

For the outer layer (containing the semi-transparent color):

opacity: 0.333;

Avec ces ajustements, les deux couches auront la même force de couleur de 25%, résultant en la même couleur perçue quel que soit l'ordre où ils sont empilés.