Farbwahrnehmung gestapelter halbtransparenter Kartons
Wenn zwei halbtransparente Kartons übereinander gestapelt werden, wird die wahrgenommene Farbe der kombinierten Die Ebenen unterscheiden sich je nach der Reihenfolge, in der sie angeordnet sind. Um den Grund für dieses Phänomen zu verstehen, werfen wir einen Blick auf das Konzept der Deckkraft in CSS.
Deckkraft definiert die Transparenz eines Elements und reicht von 0 (vollständig transparent) bis 1 (vollständig undurchsichtig). Im angegebenen Beispiel definiert das CSS für die halbtransparenten Felder die Deckkraft als 0,5, was bedeutet, dass jede Ebene eine Transparenz von 50 % hat.
Wenn die Ebene mit rotem Hintergrund über dem blauen Hintergrund platziert wird Das Auge nimmt eine Kombination aus 50 % Blau aus der unteren Schicht und 25 % Rot aus der oberen Schicht wahr. Dies liegt daran, dass die 50 %ige Transparenz der oberen Ebene die Hälfte der Farbe der unteren Ebene durchscheinen lässt.
Wenn die Reihenfolge jedoch umgekehrt wird und der blaue Hintergrund oben liegt, sieht das Auge eine Kombination aus 50 % Rot aus der unteren Schicht und 25 % Blau aus der oberen Schicht. Diese Verschiebung der Proportionen führt zu einer anderen wahrgenommenen Farbe.
Erzielung einer einheitlichen Farbe
Um unabhängig von der Reihenfolge, in der die Kartons gestapelt sind, die gleiche wahrgenommene Farbe zu gewährleisten, ist es ist notwendig, um für beide Schichten das gleiche Farbverhältnis beizubehalten. Im bereitgestellten Beispiel kann dies erreicht werden, indem die Deckkraftwerte wie folgt angepasst werden:
Für die innere Ebene (die die Volltonfarbe enthält):
opacity: 0.25;
Für die äußere Ebene (die die halbtransparente Farbe):
opacity: 0.333;
Mit diesen Anpassungen haben beide Ebenen die gleiche Farbstärke von 25 %, was unabhängig von der Reihenfolge zu derselben wahrgenommenen Farbe führt gestapelt.
Das obige ist der detaillierte Inhalt vonWarum erscheinen gestapelte halbtransparente Kartons je nach Reihenfolge in unterschiedlichen Farben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!