Heim > Web-Frontend > CSS-Tutorial > Warum erscheinen gestapelte halbtransparente Kartons je nach Reihenfolge in unterschiedlichen Farben?

Warum erscheinen gestapelte halbtransparente Kartons je nach Reihenfolge in unterschiedlichen Farben?

Mary-Kate Olsen
Freigeben: 2024-12-07 07:38:12
Original
519 Leute haben es durchsucht

Why Do Stacked Semi-Transparent Boxes Appear Different Colors Depending on Their Order?

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;
Nach dem Login kopieren

Für die äußere Ebene (die die halbtransparente Farbe):

opacity: 0.333;
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage