Comment la transparence affecte-t-elle la couleur finale des boîtes semi-transparentes qui se chevauchent ?

Impact de la transparence sur la couleur dans des boîtes semi-transparentes empilées

Lorsque plusieurs couches semi-transparentes se chevauchent, leurs couleurs se combinent pour créer une nouvelle teinte . La couleur obtenue peut varier en fonction de l'ordre dans lequel les couches sont empilées. En effet, l'opacité du calque supérieur affecte la couleur du calque inférieur.

Par exemple, une boîte rouge semi-transparente empilée sur une boîte bleue semi-transparente produira une couleur différente de celle d'un boîte bleue semi-transparente empilée sur une boîte rouge semi-transparente. Dans le premier cas, la boîte rouge bloque 50 % de la lumière, ne laissant transparaître que 50 % du bleu. Il en résulte une teinte plus violette. Dans le second cas, la boîte bleue bloque 50 % de la lumière, ne révélant que 25 % de la couleur rouge. Cela crée une teinte violette plus claire.

Pour maintenir la cohérence de la couleur quel que soit l'ordre d'empilement, assurez-vous que chaque couche apporte la même proportion de couleur. Voici un ajustement du CSS fourni dans la 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);
}

Dans cet exemple révisé, l'opacité du calque supérieur (0,25) est égale à 75 % de l'opacité du calque inférieur (0,333). Cela garantit que la proportion de couleur reste la même quel que soit l'ordre d'empilement.

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!