Wie wirkt sich die Transparenz auf die endgültige Farbe in überlappenden halbtransparenten Kästchen aus?

Auswirkungen der Transparenz auf die Farbe in gestapelten halbtransparenten Kisten

Wenn sich mehrere halbtransparente Schichten überlappen, verbinden sich ihre Farben zu einem neuen Farbton . Die resultierende Farbe kann je nach der Reihenfolge, in der die Schichten gestapelt werden, variieren. Dies liegt daran, dass die Deckkraft der oberen Ebene die Farbe der unteren Ebene beeinflusst.

Zum Beispiel erzeugt eine halbtransparente rote Box, die auf einer halbtransparenten blauen Box gestapelt ist, eine andere Farbe als eine Halbtransparente blaue Box, gestapelt auf einer halbtransparenten roten Box. Im ersten Fall blockiert der rote Kasten 50 % des Lichts, sodass nur 50 % des blauen Lichts durchscheinen. Dies führt zu einem violetteren Farbton. Im zweiten Fall blockiert die blaue Box 50 % des Lichts und gibt nur 25 % der roten Farbe frei. Dadurch entsteht ein hellerer violetter Farbton.

Um unabhängig von der Stapelreihenfolge eine einheitliche Farbe zu gewährleisten, stellen Sie sicher, dass jede Schicht den gleichen Farbanteil beisteuert. Hier ist eine Anpassung des in der Frage bereitgestellten CSS:

.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);
}

In diesem überarbeiteten Beispiel beträgt die Deckkraft der oberen Ebene (0,25) 75 % der Deckkraft der unteren Ebene (0,333). Dadurch wird sichergestellt, dass der Farbanteil unabhängig von der Stapelreihenfolge gleich bleibt.

Das obige ist der detaillierte Inhalt vonWie wirkt sich die Transparenz auf die endgültige Farbe in überlappenden halbtransparenten Kästchen aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!