Farbwahrnehmung von gestapelten semi-transluzenten Feldern

Wenn zwei semi-transluzente Kästchen aufeinander gestapelt sind, werden sich auf der Reihenfolge unterscheiden. Um den Grund für dieses Phänomen zu verstehen, werden wir uns mit dem Konzept der Opazität in CSS befassen.

Opazität definiert die Transparenz eines Elements von 0 (vollständig transparent) bis 1 (vollständig undurchsichtig). Im angegebenen Beispiel definieren die CSS für die semi-transluzenten Boxen die Deckkraft als 0,5, was darauf hinweist, dass jede Schicht eine Transparenz von 50% aufweist.

Wenn die Schicht mit einem roten Hintergrund über den blauen Hintergrund platziert ist, wird die Augen eine Kombination von 50% blau von der unteren Schicht und 25% rot von der oberen Schicht aus. Dies liegt daran, dass die 50% ige Transparenz der obersten Schicht die Hälfte der unteren Farben der unteren Schicht durchzusetzen hat.

Wenn die Reihenfolge jedoch umgekehrt ist und der blaue Hintergrund oben auf der oberen Ebene ist, stößt das Auge von der unteren Schicht von der oberen Ebene auf eine Kombination aus 50% rot. Diese Verschiebung der Proportionen führt zu einer anderen wahrgenommenen Farbe.

, um eine konsistente Farbe zu erreichen

, um sicherzustellen, dass die gleichen wahrgenommenen Farbe unabhängig von der Reihenfolge, in der die Kästchen gestapelt sind, erforderlich ist, um den gleichen Farbverhältnis für beide Lagen zu erhalten. In dem angegebenen Beispiel kann dies erreicht werden, indem die Opazitätswerte wie folgt angepasst werden:

für die innere Schicht (mit der soliden Farbe enthält):

opacity: 0.25;

für die äußere Schicht (die Semi-Transe-Färbung enthält. Diese Anpassungen haben beide Schichten die gleiche Farbfestigkeit von 25%, was zu der gleichen wahrgenommenen Farbe führt, unabhängig von der Reihenfolge, die sie gestapelt sind.