wake-up-neo.com

Farbe der gestapelten halbtransparenten Kartons ist abhängig von der Bestellung?

Warum hängt die endgültige Farbe von zwei gestapelten halbdurchlässigen Schachteln von der Bestellung ab?

Wie kann ich es schaffen, dass ich in beiden Fällen die gleiche Farbe bekomme?

.a {
  background-color: rgba(255, 0, 0, 0.5)
}

.b {
  background-color: rgba(0, 0, 255, 0.5)
}
<span class="a"><span class="b">          Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>
74
rmv

Einfach, weil in beiden Fällen die Farbkombination nicht gleich ist, da die Deckkraft der oberen Ebene die Farbe der unteren Ebene beeinflusst. ) Schicht.

Im ersten Fall sehen Sie 50% blau und 50% transparent in der obersten Ebene. Durch den transparenten Teil sehen Sie 50% der roten Farbe in der unteren Ebene (also sehen wir insgesamt nur 25% der roten Farbe ). Gleiche Logik für den zweiten Fall ( 50% von Rot und 25% von Blau ); Sie sehen also unterschiedliche Farben, da wir in beiden Fällen nicht den gleichen Anteil haben.

Um dies zu vermeiden, müssen Sie für beide Farben den gleichen Anteil haben.

Hier ist ein Beispiel, um besser zu veranschaulichen und zu zeigen, wie wir dieselbe Farbe erhalten können:

In der obersten Ebene (der inneren Spanne) haben wir eine Deckkraft von 0.25 (Also haben wir 25% der ersten Farbe und 75% der transparenten), dann haben wir für die unterste Ebene (die äußere Spanne) 0.333 Deckkraft (so haben wir 1/3 von 75% = 25% der Farbe und der Rest ist transparent). Wir haben den gleichen Anteil in beiden Ebenen (25%), so dass wir die gleiche Farbe sehen , auch wenn wir die Reihenfolge der Ebenen umkehren.

.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)
}
<span class="a"><span class="b">          Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>

Als Randnotiz wirkt sich der weiße Hintergrund auch auf die Wiedergabe der Farben aus. Sein Anteil beträgt 50%, was das logische Ergebnis von 100% ergibt (25% + 25% + 50%).

Sie können auch feststellen, dass es nicht möglich ist, für beide Farben den gleichen Anteil zu haben, wenn die Deckschicht eine Deckkraft größer als 0.5 Hat, da die erste mehr als hat 50% und es wird weniger als 50% für die zweite bleiben:

.a {
  background-color: rgba(255, 0, 0, 1) /*taking 40% even with opacity:1*/
}

.b {
  background-color: rgba(0, 0, 255, 1) /*taking 40% even with opacity:1*/
}

.a > .b {
  background-color: rgba(0, 0, 255, 0.6) /* taking 60%*/
}
.b > .a {
  background-color: rgba(255, 0, 0, 0.6) /* taking 60%*/
}
<span class="a"><span class="b">          Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>

Der häufigste triviale Fall ist, wenn die oberste Ebene opacity:1 Hat, wodurch die oberste Farbe mit einem Anteil von 100% erzeugt wird. daher ist es eine undurchsichtige Farbe.


Für eine genauere und genauere Erklärung wird hier die Formel verwendet, mit der die Farbe berechnet wird, die wir nach der Kombination beider Schichten sehenref:

ColorF = (ColorT*opacityT + ColorB*OpacityB*(1 - OpacityT)) / factor

ColorF ist unsere endgültige Farbe. ColorT / ColorB sind jeweils die oberen und unteren Farben. OpazitätT / OpazitätB sind jeweils die oberen und unteren Opazitäten, die für jede Farbe definiert sind:

Das factor wird durch diese Formel OpacityT + OpacityB*(1 - OpacityT) definiert.

Es ist klar, dass sich beim Umschalten der beiden Ebenen das factor nicht ändert (es bleibt eine Konstante), aber wir können deutlich sehen, dass sich der Anteil für jede Farbe ändert, da wir nicht denselben Multiplikator haben.

Für unseren ersten Fall sind beide Opazitäten 0.5, Wir werden also haben:

ColorF = (ColorT*0.5 + ColorB*0.5*(1 - 0.5)) / factor

Wie oben erläutert, hat die obere Farbe einen Anteil von 50% (0.5) Und die untere einen Anteil von 25% (0.5*(1-0.5)), so dass beim Umschalten der Ebenen auch diese umgeschaltet werden Proportionen; daher sehen wir eine andere final Farbe.

Betrachten wir nun das zweite Beispiel, so erhalten wir:

ColorF = (ColorT*0.25 + ColorB*0.333*(1 - 0.25)) / factor

In diesem Fall haben wir 0.25 = 0.333*(1 - 0.25), so dass das Umschalten der beiden Ebenen keine Auswirkung hat. somit bleibt die Farbe gleich.

Wir können auch die trivialen Fälle klar identifizieren:

  • Wenn die oberste Ebene opacity:0 Hat, ist die Formel gleich ColorF = ColorB
  • Wenn die oberste Ebene opacity:1 Hat, ist die Formel gleich ColorF = ColorT
82
Temani Afif

Sie können die CSS-Eigenschaft mix-blend-mode : multiply (eingeschränkt Browser-Unterstützung )

.a {
  background-color: rgba(255, 0, 0, 0.5);
  mix-blend-mode: multiply;
}

.b {
  background-color: rgba(0, 0, 255, 0.5);
  mix-blend-mode: multiply;
}

.c {
  position: relative;
  left: 0px;
  width: 50px;
  height: 50px;
}

.d {
  position: relative;
  left: 25px;
  top: -50px;
  width: 50px;
  height: 50px;
}
<span class="a"><span class="b">          Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>

<div class="c a"></div>
<div class="d b"></div>

<div class="c b"></div>
<div class="d a"></div>
35
Moffen

Sie mischen drei Farben in der folgenden Reihenfolge:

  • rgba(0, 0, 255, 0.5) over (rgba(255, 0, 0, 0.5) over rgba(255, 255, 255, 1))
  • rgba(255, 0, 0, 0.5) over (rgba(0, 0, 255, 0.5) over rgba(255, 255, 255, 1))

Und Sie erhalten unterschiedliche Ergebnisse. Dies liegt daran, dass die Vordergrundfarbe mit normaler Mischmodus mit der Hintergrundfarbe gemischt wird1 das ist nicht kommutativ . Und da es nicht kommutativ ist, führt das Austauschen der Vorder- und Hintergrundfarben zu unterschiedlichen Ergebnissen.

1 Der Mischmodus ist eine Funktion, die eine Vordergrund- und Hintergrundfarbe akzeptiert, eine Formel anwendet und die resultierende Farbe zurückgibt.

Die Lösung besteht darin, einen Mischmodus zu verwenden, der kommutativ ist: einen, der dieselbe Farbe für dasselbe Farbpaar in beliebiger Reihenfolge zurückgibt (z. B. den Mischmodus "Multiplizieren", der beide Farben multipliziert und die resultierende Farbe zurückgibt, oder den Mischmodus "Abdunkeln", der zurückgibt die dunklere Farbe der beiden).

$(function() {
  $("#mode").on("change", function() {
    var mode = $(this).val();
    $("#demo").find(".a, .b").css({
      "mix-blend-mode": mode
    });
  });
});
#demo > div {
  width: 12em;
  height: 5em;
  margin: 1em 0;
}

#demo > div > div {
  width: 12em;
  height: 4em;
  position: relative;
  top: .5em;
  left: 4em;
}

.a {
  background-color: rgba(255, 0, 0, 0.5);
}

.b {
  background-color: rgba(0, 0, 255, 0.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="mode">
  <optgroup label="commutative">
    <option>multiply</option>
    <option>screen</option>
    <option>darken</option>
    <option>lighten</option>
    <option>difference</option>
    <option>exclusion</option>
  </optgroup>
  <optgroup label="non-commutative">
    <option selected>normal</option>
    <option>overlay</option>
    <option>color-dodge</option>
    <option>color-burn</option>
    <option>hard-light</option>
    <option>soft-light</option>
    <option>hue</option>
    <option>saturation</option>
    <option>color</option>
    <option>luminosity</option>
  </optgroup>
</select>

<div id="demo">
  <div class="a">
    <div class="b"></div>
  </div>
  <div class="b">
    <div class="a"></div>
  </div>
</div>

Der Vollständigkeit halber hier die Formel zur Berechnung der zusammengesetzten Farbe:

αs x (1 - αb) x Cs + αs x αb x B(Cb, Cs) + (1 - αs) x αb x Cb

mit:

Cs: Der Farbwert der Vordergrundfarbe
αs: Der Alpha-Wert der Vordergrundfarbe
Cb: Der Farbwert der Hintergrundfarbe
αb: der Alpha-Wert der Hintergrundfarbe B: die Mischfunktion

18
Salman A

Erläuterungen zur Vorgehensweise finden Sie in der Antwort von Temani Afif.
Als alternative Lösung können Sie einen Bereich nehmen, a, ihn positionieren und ihm einen niedrigeren Z-Index geben, wenn er innerhalb von b liegt. Dann ist die Stapelung immer gleich: b wird in der ersten Zeile über a und a unter b gezeichnet.

.a {
  background-color: rgba(255, 0, 0, 0.5);
}

.b {
  background-color: rgba(0, 0, 255, 0.5);
}

.b .a {position:relative; z-index:-1;}
<span class="a"><span class="b">     Color 1</span></span>
<span class="b"><span class="a">Same Color 2</span></span>
7
Mr Lister