Pourquoi les boîtes semi-transparentes empilées apparaissent-elles de différentes couleurs selon leur ordre ?

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

Lorsque deux boîtes semi-translucides sont empilées l'une sur l'autre, la couleur perçue de l'ensemble combiné les couches différeront en fonction de l’ordre dans lequel elles sont disposées. Pour comprendre la raison de ce phénomène, approfondissons le concept d'opacité en CSS.

L'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 des cases semi-translucides définit l'opacité à 0,5, indiquant que chaque calque a une transparence de 50 %.

Lorsque le calque avec un fond rouge est placé au-dessus du fond bleu , l’œil perçoit une combinaison de 50 % de bleu provenant de la couche inférieure et de 25 % de rouge provenant de la couche supérieure. En effet, la transparence de 50 % de la couche supérieure laisse transparaître la moitié de la couleur de la couche inférieure.

Cependant, lorsque l'ordre est inversé, avec le fond bleu en haut, l'œil rencontre une combinaison de 50 % de rouge. de la couche inférieure et 25 % de bleu de la couche supérieure. Ce changement de proportions se traduit par une couleur perçue différente.

Obtention d'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 Il est nécessaire de conserver la même proportion de couleur pour les deux couches. Dans l'exemple fourni, cela peut être réalisé en ajustant les valeurs d'opacité comme suit :

Pour le calque interne (contenant la couleur unie) :

opacity: 0.25;

Pour le calque externe (contenant la couleur semi-transparente) :

opacity: 0.333;

Avec ces ajustements, les deux calques auront la même force de couleur de 25 %, ce qui entraînera la même couleur perçue quel que soit le ordre qu'ils soient empilés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!