Tiefes Verständnis des Mechanismus des CSS-Hintergrund-Blend-Modus

Dieser Artikel darf gerne geteilt und zusammengefasst werden. Es ist nicht erforderlich, den vollständigen Text erneut abzudrucken. Bitte respektieren Sie das Urheberrecht. Der Kreis ist so klein. Wenn Sie ihn dringend benötigen, können Sie uns für eine Genehmigung kontaktieren.

1. Vielleicht wissen Sie alle

Lassen Sie mich zunächst zwei Punkte nennen, die Sie vielleicht schon kennen:

1. background-blend-mode selbst verfügt über isolierende Eigenschaften, d. h. wenn background-blend-mode ein Element angewendet wird, wird der endgültige Effekt nur durch das Hintergrundbild und die Hintergrundfarbe des aktuellen Elements beeinflusst und nicht durch andere Elemente im aktuellen Bereich.

2. Nach dem Anwenden background-blend-mode werden die Bilder nicht nur miteinander vermischt, sondern auch mit der Hintergrundfarbe.

Lassen Sie uns als Nächstes über einige Dinge sprechen, die Sie möglicherweise nicht kennen. Dies ist auch der Grund, warum viele Leute verwirrt sind, warum background-blend-mode so gerendert wird.

2. Was Sie vielleicht nicht wissen

1. Die Reihenfolge des Hintergrunds beeinflusst den Mischeffekt

Der Mischeffekt hängt eng mit der Reihenfolge der Hintergrundbilder in background Hintergrundeigenschaft zusammen. Bei CSS mit mehreren Hintergründen gilt: Je später das Hintergrundbild in der Syntax steht, desto niedriger ist seine Ebene. Aus diesem Grund muss background-color am Ende der Syntax geschrieben werden, um gültig zu sein, da die Hintergrundfarbebene immer die niedrigste ist.

Beispielsweise die folgenden zwei Elemente:

<div Klasse="Ball"></div>
<div Klasse="ball2"></div>

Stellen Sie den Hintergrund-Blending-Modus auf Overlay, aber die Reihenfolge der Hintergrundbilder der beiden Elemente wird umgekehrt. Der Code lautet wie folgt:

.ball {
    Breite: 200px; Höhe: 200px;
    Randradius: 50 %;
    Hintergrund: linearer Farbverlauf (Dunkelpink, Dunkelpink), linearer Farbverlauf (Dunkelhimmelblau, Dunkelhimmelblau);
    /* Overlay-Mischmodus anwenden */
    Hintergrund-Mischmodus: Überlagerung;
}
.ball2 {
    Breite: 200px; Höhe: 200px;
    Randradius: 50 %;
    Hintergrund: linearer Farbverlauf (Dunkelhimmelblau, Dunkelhimmelblau), linearer Farbverlauf (Dunkelpink, Dunkelpink);
    /* Overlay-Mischmodus anwenden */
    Hintergrund-Mischmodus: Überlagerung;
}

Das Ergebnis ist in der folgenden Abbildung dargestellt. Das Element .ball wird durch deeppink dargestellt, das auf deepskyblue überlagert ist, und die endgültige Mischfarbe ist bläulich. .ball2 wird durch deepskyblue dargestellt, das auf deeppink überlagert ist, und die endgültige Mischfarbe ist violett.

2. Der Mischeffekt ist das Ergebnis mehrerer gleichzeitig wirkender Mischattribute

Vielen Entwicklern ist nicht bewusst, dass background-blend-mode tatsächlich mehrere Blending-Modus-Werte unterstützt, die unterschiedlichen Hintergrundbildern entsprechen. Im Gegensatz dazu unterstützt die Eigenschaft mix-blend-mode nur einen einzigen Blending-Modus-Wert. Zum Beispiel:

.ball {
    Hintergrund: linearer Farbverlauf (Deeppink, Deeppink), 
        linearer Farbverlauf (Tiefhimmelblau, Tiefhimmelblau);
    Hintergrund-Mischmodus: Überlagerung;
}

ist eigentlich gleichbedeutend mit:

.ball {
    Hintergrund: linearer Farbverlauf (Deeppink, Deeppink), 
        linearer Farbverlauf (Tiefhimmelblau, Tiefhimmelblau);
    Hintergrund-Mischmodus: Overlay-Overlay;
}

Das bedeutet, dass deeppink tatsächlich Deepskyblue und die Hintergrundfarbe (in diesem Fall transparent) überlagert, deepskyblue überlagert die Hintergrundfarbe (in diesem Fall transparent).

Mit anderen Worten: Jedes Hintergrundbild verfügt tatsächlich über einen eigenen Füllmoduswert, der sich stark von mix-blend-mode unterscheidet! Normalerweise legen wir bei Verwendung mix-blend-mode den Blending-Modus nur für das Element der obersten Ebene fest, nicht jedoch für jede einzelne Elementebene. Dies führt zu dem schwerwiegenden Missverständnis, dass background-blend-mode anders ist als erwartet.

Wir verwenden ein Beispiel, um zu demonstrieren, wie mehrere Werte der Eigenschaft background-blend-mode nacheinander den Hintergrundbildern entsprechen.

<div Klasse="Box"></div>

.Kasten {
    Breite: 200px; Höhe: 200px;
    Hintergrund: linearer Farbverlauf (nach rechts unten, dunkelrosa 50 %, transparent 50 %),
        linearer Farbverlauf (nach oben rechts, dunkelrosa 50 %, transparent 50 %), 
        dunkelblau;
    Hintergrund-Mischmodus: Multiplizieren, Bildschirm;
    Position: relativ;
}
/* Der ursprüngliche dunkelrosa Farbwert in der Mitte*/
.box::vor {
    Inhalt: '';
    Position: absolut;
    Breite: 33 %; Höhe: 33 %;
    Einschub: 0;
    Rand: automatisch;
    Hintergrundfarbe: Dunkelrosa;
}

An diesem Punkt stellt das .box Element insgesamt 5 Farben dar. Der RGB-Farbwert jeder Farbe und wie er generiert wird, werden in der folgenden Abbildung gezeigt.

In:

Der quadratische Bereich mit der Seriennummer ① in der Mitte wendet keinen Mischmodus an und die Farbe ist deeppink . Er dient dazu, den Vergleich mit den Farben in den Bereichen ③ und ⑤ zu erleichtern.

• Bereich ② ist die Hintergrundfarbe darkblue . Da die beiden diagonalen Farbverläufe diesen Bereich nicht abdecken, wird die eingestellte Hintergrundfarbe direkt freigelegt.
• Die Bereiche ③ und ⑤ sind die Farbverläufe der unteren Ebene, also die Farbverläufe hinter background . Der entsprechende Mischmodus ist auch der hinter background-blend-mode , also „ screen , der Farbfiltermodus, der die Farbe aufhellen kann.
• Bereich ④ und Bereich ⑤ sind der obere Farbverlauf, also der Farbverlauf mit einer vorderen Position im background . Der entsprechende Mischmodus ist auch der mit einem vorderen background-blend-mode Attributwert, also multiply , der positive Filmüberlagerungsmodus, der die Farbe dunkler machen kann.
• Die Farbe des Bereichs ③ ergibt sich aus dem Farbfiltereffekt der Verlaufsfarbe deeppink und der Hintergrundfarbe darkblue . Es ist ersichtlich, dass die endgültige Farbe heller ist als deeppink . Der endgültige Mischfarbwert ist rgb(255,20,206) .
• Die Farbe des Bereichs ④ entsteht durch die Mischung der Farbverlaufsfarbe deeppink und der Hintergrundfarbe darkblue durch Überlagerung. Es ist ersichtlich, dass die endgültige Farbe dunkler als darkblue ist. Der endgültige Mischfarbwert ist rgb(0,0,80) .
• Bereich ⑤ ist der komplexeste. Wenn Sie ihn verstehen, verstehen Sie auch die Rendering-Leistung der meisten Eigenschaften background-blend-mode .
• Bereich ⑤ hat insgesamt 3 Ebenen, und zwar: die obere Ebene ist deeppink , der Mischmodus ist „ multiply “, die untere Ebene ist deeppink , der Mischmodus ist „ screen ; die Hintergrundfarbe der unteren Ebene darkblue .

Daher ist der endgültige Farbwert der Farbwert der oberen Ebene deeppink multiply mit der unteren Ebene deeppink und der Hintergrundfarbe darkblue gemischt mit screen .

Da der Farbwert des darunterliegenden deeppink und der Hintergrundfarbe darkblue mithilfe screen handelt es sich um die Farbe des Bereichs ③. Daher ist die Farbe des Bereichs ⑤ der Farbwert von deeppink und der Farbwert des Bereichs ③ rgb(255,20,206) nach der Multiplikation, und das Ergebnis ist rgb(255,1,119) .

Das Obige ist das Prinzip der fünf Farben des .box Elements.

3. Hintergrund-Blend-Modus und Implementierung von Verlaufssymbolen

Sehen wir uns abschließend an, warum die meisten Leute background-blend-mode nicht verwenden können, um den Effekt von Verlaufssymbolen zu erzielen.

Beispielsweise gibt es jetzt ein kleines Löschsymbol mit einer sehr dunklen Farbe. Theoretisch können wir lighten -Mischmodus verwenden, um einen Farbverlaufseffekt zu erzielen, da der Effekt der lighten darin besteht, die hellere Farbe zu verwenden. Da das Symbol selbst sehr dunkel ist, wird es definitiv eine Farbverlaufsfarbe anzeigen. Wir müssen dem Symbol nur einen weißen Hintergrund hinzufügen. Daher haben viele Leute gemäß dieser Idee CSS-Code wie unten gezeigt geschrieben:

.icon-löschen {
    Hintergrund: linearer Farbverlauf (Dunkelhimmelblau, Dunkelrosa), 
        url(delete.png), weiß;
    Hintergrund-Mischmodus: Aufhellen;
}

Auf den ersten Blick scheint es logisch einwandfrei zu sein. Der Farbverlauf und das schwarze Symbol auf weißem Hintergrund werden gemischt, um die Farbe aufzuhellen. Egal, wie Sie denken, das schwarze Symbol sollte auch eine Farbverlaufsfarbe werden. Leider ist der endgültige Farbverlauf keine Farbverlaufsfarbe, sondern reines Weiß. Warum passiert das?

Das liegt daran, dass background-blend-mode:lighten hier eigentlich eine Abkürzung oder Abkürzung ist. Tatsächlich ist der tatsächlich berechnete Wert lighten lighten . Der Code lautet wie folgt:

.icon-löschen {
    Hintergrund: linearer Farbverlauf (Dunkelhimmelblau, Dunkelrosa), 
        url(delete.png), weiß;
    /* Tatsächlich berechneter Wert */
    Hintergrund-Mischmodus: aufhellen aufhellen;
}

Das heißt, auf das Löschsymbol delete.png wird ebenfalls der Füllmodus lighten angewendet und es wird mit der weißen Hintergrundfarbe gemischt, sodass es reines Weiß ergibt.

Jetzt, da wir das Problem kennen, wissen wir auch, wie wir es lösen können. Es ist ganz einfach. Lassen Sie einfach delete.png und die weiße Hintergrundfarbe verschmelzen, während das Aussehen des Originalsymbols erhalten bleibt. Die folgenden beiden CSS-Methoden können beide verwendet werden:

.icon-löschen {
    Hintergrund: linearer Farbverlauf (Dunkelhimmelblau, Dunkelpink), 
        url(delete.png), weiß;
    /* Stellen Sie den Mischmodus des PNG-Symbols auf Abdunkeln */
    Hintergrund-Mischmodus: Aufhellen, Abdunkeln;
}

Oder:

.icon-löschen {
    Hintergrund: linearer Farbverlauf (Dunkelhimmelblau, Dunkelpink), 
        url(delete.png), weiß;
    /* Setze den Mischmodus des PNG-Symbols auf normal */
    Hintergrund-Mischmodus: normal aufhellen;
}

Es wird empfohlen, das normal Schlüsselwort zu verwenden, da es intelligenter ist und eine bessere Leistung bietet. Der endgültige Effekt ist in der folgenden Abbildung dargestellt.

Der beste Weg, den Effekt eines Farbverlaufssymbols zu erzielen, ist natürlich definitiv das CSS- mask . Das hier mit dem Mischmodus implementierte Farbverlaufssymbol hat einen weißen Hintergrund, was keine perfekte Implementierungsmethode ist. Der Hauptzweck besteht darin, jedem die Rendering-Details background-blend-mode Attributs verständlich zu machen.

IV. Vervollständigungsregeln des Hintergrund-Blend-Modus

Wenn die Anzahl der Eigenschaftswerte background-blend-mode nicht mit background-image übereinstimmt, gelten die folgenden Regeln:

Wenn die Anzahl der Werte für background-blend-mode größer ist als background-image , werden die zusätzlichen Mischmodi ignoriert, zum Beispiel:

.Beispiel { 
    Hintergrund: linearer Farbverlauf (Dunkelhimmelblau, Dunkelrosa), Weiß;
    Hintergrund-Mischmodus: Aufhellen, Abdunkeln;
}

ist gleichbedeutend mit:

.Beispiel { 
    Hintergrund: linearer Farbverlauf (Dunkelhimmelblau, Dunkelrosa), Weiß;
    Hintergrund-Mischmodus: Aufhellen;
}

Wenn die Anzahl der background-blend-mode -Werte kleiner als background-image ist, wird der komplette background-blend-mode -Eigenschaftswert zur Vervollständigung wiederholt, zum Beispiel:

.Beispiel { 
    Hintergrund: linearer Farbverlauf (Dunkelhimmelblau, Dunkelpink), 
        linearer Farbverlauf (Dunkelhimmelblau, Dunkelrosa),
        linearer Farbverlauf (Dunkelhimmelblau, Dunkelrosa), Weiß;
    Hintergrund-Mischmodus: Aufhellen, Abdunkeln;
}

ist gleichbedeutend mit:

.Beispiel { 
    Hintergrund: linearer Farbverlauf (Dunkelhimmelblau, Dunkelpink), 
        linearer Farbverlauf (Dunkelhimmelblau, Dunkelrosa),
        linearer Farbverlauf (Dunkelhimmelblau, Dunkelrosa), Weiß;
    Hintergrund-Mischmodus: aufhellen, abdunkeln, heller machen;
}

Das heißt, lighten, darken werden zusammen wiederholt, anstatt nur den letzten Wert des Füllmodus zu wiederholen. Daher lighten .

V. Fazit

Mit der CSS-Eigenschaft „ background-blend-mode können Sie Mischmodi zwischen einzelnen Hintergrundbildern anwenden.

background-blend-mode wird deutlich seltener verwendet als mix-blend-mode .

Der Grund ist:

1. Fotos aus der realen Welt werden selten als background-image dargestellt, da sie einem barrierefreien Zugriff nicht förderlich sind und die ursprüngliche Absicht des Hybridmodus-Designs darin besteht, solche Fotos zu verarbeiten.

2. Der Arbeitsmechanismus background-blend-mode ist nicht so einfach wie mix-blend-mode und viele Entwickler beherrschen ihn nicht gut. Verwenden Sie beispielsweise den Mischmodus, um ein kleines Symbol mit transparentem Hintergrund in ein Farbverlaufssymbol umzuwandeln. Viele Leute verwenden mix-blend-mode , um dies zu erreichen, aber nur wenige können background-blend-mode verwenden, um dies zu erreichen.

Daher wird background-blend-mode häufiger verwendet, um die Hintergrundtextur von CSS anzureichern, zum Beispiel:

Ich werde nicht ins Detail gehen, da dies nicht der Hauptinhalt dieses Artikels ist.

Adresse dieses Artikels: https://www.zhangxinxu.com/wordpress/?p=9499

Damit ist dieser Artikel über das vertiefte Verständnis des Arbeitsmechanismus des CSS-Hintergrund-Blendmodus abgeschlossen. Weitere Informationen zum Arbeitsmechanismus des CSS-Hintergrund-Blendmodus finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!