1. Einführung in das Mix-Blend-Mode-Attribut 2. Allgemeine Attributwerte des Mix-Blend-Mode 3. Anwendung des Mix-Blend-Mode-Attributs 1. Anwendungseffekt 2. Zugehöriger Code 4. Hintergrund der intelligenten Textanpassung 1 . Originalstil 2. Mix hinzufügen 3. Implementierungscode
Das [ mix-blend-mode-Attribut ] in CSS beschreibt, wie der Inhalt eines Elements mit dem Inhalt des unmittelbar übergeordneten Elements des Elements und dem Hintergrund des Elements gemischt werden soll;
Wird zum Festlegen des Mischmodus zwischen Hintergrund und Vordergrund eines Elements verwendet. Kann mit dem Attribut „Hintergrundbild“ verwendet werden, um verschiedene visuelle Effekte zu erzeugen.
| Seriennummer | Attributwert | Mischmodi und Anweisungen |
|---|---|---|
| 1 | Mix-Blend-Modus: normal ; | Normal: Diese Eigenschaft wendet keine Überblendung an; |
| 2 | Mix-Blend-Modus: multiplizieren ; | Multiplizieren: Das Element wird mit dem Hintergrund multipliziert und ersetzt die Hintergrundfarbe. Die resultierende Farbe ist immer so dunkel wie der Hintergrund. |
| 3 | Mix-Blend-Modus: Overlay ; | Überlagerung: Multipliziert oder maskiert Inhalte basierend auf der Hintergrundfarbe, im Gegensatz zum Mischmodus „Hartes Licht“. |
| 4 | Mix-Blend-Modus: Bildschirm ; | Bildschirm: Hintergrund und Inhalt multiplizieren und das Ergebnis ergänzen. Dies führt dazu, dass der Inhalt heller als die Hintergrundfarbe ist. |
| 5 | Mix-Blend-Modus: abdunkeln ; | Abdunkeln : Wenn der Inhalt abgedunkelt wird, wird der Hintergrund durch den Inhalt ersetzt, andernfalls bleibt er unverändert; |
| 6 | Mix-Blend-Modus: Aufhellen ; | Aufhellen: Der Hintergrund wird durch helleren Inhalt ersetzt; |
| 7 | Mix-Blend-Modus: Farbe ausweichen ; | Farbe aufhellen: Diese Eigenschaft hellt die Hintergrundfarbe auf, um die Farbe des Inhalts widerzuspiegeln. |
| 8 | Mix-Blend-Modus: Farbbrennen ; | Farbaufhellung: Dadurch wird der Hintergrund dunkler, um die natürliche Farbe des Inhalts widerzuspiegeln. |
| 9 | Mix-Blend-Modus: hartes Licht ; | Hartes Licht: Abhängig von der Farbe des Inhalts wird dieser durch diese Eigenschaft gefiltert oder vervielfacht; |
| 10 | Mix-Blend-Modus: weiches Licht ; | Weiches Licht: Abhängig von der Farbe des Inhalts wird dieser dunkler oder heller. |
| 11 | Mix-Blend-Modus: Differenz ; | Differenz : Dadurch wird die dunklere der beiden Farben von der hellsten Farbe subtrahiert; |
| 12 | Mix-Blend-Modus: Ausschluss ; | Ausschließen : Ähnlich wie Differenz, jedoch mit geringerem Kontrast; |
| 13 | Mix-Blend-Modus: Farbton ; | Farbton : Erzeugt Farbe durch Kombination des Farbtons des Inhalts mit der Sättigung und Helligkeit des Hintergrunds; |
| 14 | Mix-Blend-Modus: Sättigung ; | Sättigung : Erzeugt Farbe durch die Sättigung des Inhalts sowie den Farbton und die Helligkeit des Hintergrunds; |
| 15 | Mix-Blend-Modus: Farbe ; | Farbmischung: Erstellen Sie Farben basierend auf dem Farbton und der Sättigung des Inhalts sowie der Helligkeit des Hintergrunds. |
| 16 | Mix-Blend-Modus: Leuchtkraft ; | Leuchtkraft : Erstellt Farben basierend auf der Leuchtkraft des Inhalts sowie dem Farbton und der Sättigung des Hintergrunds. Dies ist das Gegenteil der Farbeigenschaft; |
normal: Dieses Attribut wendet keinerlei Überblendung an.multiply: Das Element wird mit dem Hintergrund multipliziert und ersetzt die Hintergrundfarbe. Die resultierende Farbe ist immer so dunkel wie der Hintergrund.screen: multipliziert den Hintergrund und der Inhalt ergänzt dann das Ergebnis Dies führt zu Inhalten, die heller als die Hintergrundfarbe sind. Overlay: Der Inhalt wird abhängig von der Hintergrundfarbe vervielfacht oder gefiltert. Dies ist die Umkehrung des Mischmodus für hartes Licht. Verdunkeln: Der Hintergrund wird durch den Inhalt ersetzt, an dem sich der Inhalt befindet dunkler, andernfalls bleibt es so wie es war.lighten: Der Hintergrund wird durch den Inhalt ersetzt, wo der Inhalt heller ist.color-dodge: Dieses Attribut hellt die Hintergrundfarbe auf, um die Farbe des Inhalts widerzuspiegeln.color-burn: Dadurch wird der Hintergrund dunkler um die natürliche Farbe des Inhalts wiederzugeben.Hard-Light: Abhängig von der Farbe des Inhalts wird diese durch dieses Attribut abgeschirmt oder multipliziert.Soft-Light: Abhängig von der Farbe des Inhalts wird es dadurch abgedunkelt oder aufgehellt.Difference: Dadurch wird die dunklere Farbe subtrahiert der beiden Farben aus der hellsten Farbe. Ausschluss: ähnlich wie Differenz, aber mit geringerem Kontrast. Farbton: Erstellt eine Farbe mit dem Farbton des Inhalts kombiniert mit der Sättigung und Leuchtkraft des Hintergrunds. Sättigung: Erstellt eine Farbe mit der Sättigung des Inhalts kombiniert mit der Farbton und die Leuchtkraft des Hintergrunds.Farbe: Erstellt eine Farbe mit dem Farbton und der Sättigung des Inhalts und der Leuchtkraft des Hintergrunds.Leuchtkraft: Erstellt eine Farbe mit der Leuchtkraft des Inhalts und dem Farbton und Sättigung des Hintergrunds. Dies ist die Umkehrung des Farbattributs.
Klicken Sie auf die Effektanzeige
Anwendung des Mix-Blend-Mode-Attributs
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anwendung des Mix-Blend-Mode-Attributs</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
.container {
/* Variablen definieren */
--mix-blend-mode: normal;
Position: relativ;
Breite: 300px;
Höhe: 400px;
Rand: 60px;
Polsterung: 20px;
Kastenschatten: 0 0 6px 1px #999;
Randradius: 6px;
Caret-Farbe: transparent;
}
h3,
h4 {
Rand unten: 10px;
}
.info-box {
Breite: 100 %;
Höhe: 24px;
Zeilenhöhe: 24px;
}
.Kreis {
Position: absolut;
Breite: 200px;
Höhe: 200px;
Randradius: 50 %;
Mix-Blend-Modus: var(--mix-blend-mode);
}
.red-box {
links: 70px;
oben: 160px;
Hintergrundfarbe: rot;
}
.green-box {
links: 30px;
oben: 220px;
Hintergrundfarbe: hellgrün;
}
.blue-box {
links: 110px;
oben: 220px;
Hintergrundfarbe: blau;
}
</style>
</head>
<Körper>
<div class="container">
<h3>Anwendung des Mix-Blend-Mode-Attributs</h3>
<h4 class="value-box"></h4>
<div class="info-box"></div>
<div class="circle red-box"></div>
<div class="circle green-box"></div>
<div class="circle blue-box"></div>
</div>
</body>
<Skript>
// Elemente abrufen var container = document.querySelector(".container");
var valueBox = document.querySelector(".value-box");
var infoBox = document.querySelector(".info-box");
//Die Werteliste und Beschreibung des mix-blend-mode-Attributs;
var-Werte = [
{
ID: 1,
Name: „normal“,
Wert: „normal“,
info: „Diese Eigenschaft wendet keine Verschmelzung an;“
},
{
ID: 2,
Name: „multiplizieren“,
Wert: „multiplizieren“,
Info: „Das Element wird mit dem Hintergrund multipliziert und ersetzt die Hintergrundfarbe. Die resultierende Farbe ist immer so dunkel wie der Hintergrund;“
},
{
ID: 3,
Name: „Overlay“,
Wert: „Overlay“,
info: „Inhalt basierend auf der Hintergrundfarbe multiplizieren oder maskieren; dies ist das Gegenteil des Mischmodus für hartes Licht;“
},
{
ID: 4,
Name: „Bildschirm“,
Wert: „Bildschirm“,
info: „Hintergrund und Inhalt multiplizieren und dann das Ergebnis ergänzen. Dadurch wird der Inhalt heller als die Hintergrundfarbe;“
},
{
ID: 5,
Name: „Dunkel“,
Wert: „abdunkeln“,
info: „Wenn der Inhalt abgedunkelt wird, wird der Hintergrund durch den Inhalt ersetzt, andernfalls bleibt er unverändert;“
},
{
ID: 6,
Name: „aufhellen“,
Wert: „aufhellen“,
info: „Der Hintergrund wird durch helleren Inhalt ersetzt;“
},
{
ID: 7,
Name: „Farbe verblasst“,
Wert: „color-dodge“,
info: „Diese Eigenschaft hellt die Hintergrundfarbe auf, um die Farbe des Inhalts widerzuspiegeln;“
},
{
ID: 8,
Name: „Farbe verblasst“,
Wert: „color-burn“,
info: „Dadurch wird der Hintergrund abgedunkelt, um die natürliche Farbe des Inhalts widerzuspiegeln.“
},
{
ID: 9,
Name: „hartes Licht“,
Wert: „hartes Licht“,
info: „Diese Eigenschaft filtert oder multipliziert den Inhalt basierend auf seiner Farbe.“
},
{
ID: 10,
Name: „weiches Licht“,
Wert: „weiches Licht“,
info: „Je nach Farbe des Inhalts wird dieser dadurch abgedunkelt oder aufgehellt;“
},
{
ID: 11,
Name: „Unterschied“,
Wert: „Differenz“,
info: „Dadurch wird die dunklere der beiden Farben von der hellsten Farbe subtrahiert;“
}, {
ID: 12,
Name: „ausschließen“,
Wert: „Ausschluss“,
info: „Ähnlich Differenz, aber mit geringerem Kontrast;“
},
{
ID: 13,
Name: „Hue“,
Wert: „Farbton“,
info: „Erstellen Sie Farbe, indem Sie den Farbton des Inhalts mit der Sättigung und Helligkeit des Hintergrunds kombinieren.“
},
{
ID: 14,
Name: „Sättigung“,
Wert: „Sättigung“,
info: „Erstellen Sie Farbe aus der Sättigung des Inhalts sowie dem Farbton und der Helligkeit des Hintergrunds.“
},
{
ID: 15,
Name: „Farbmischung“,
Wert: „Farbe“,
info: „Erstellen Sie Farben basierend auf dem Farbton und der Sättigung des Inhalts sowie der Helligkeit des Hintergrunds.“
},
{
ID: 16,
Name: „Helligkeit“,
Wert: „Leuchtkraft“,
info: „Erstellt eine Farbe basierend auf der Leuchtkraft des Inhalts sowie dem Farbton und der Sättigung des Hintergrunds. Dies ist das Gegenteil einer Farbeigenschaft;“
}
]
changeMode();
//Misch-Blend-Modus ändern
Funktion changeMode() {
sei Index = 0;
modAttr(index);
let timerId = setInterval(() => {
if (index >= Werte.Länge) {
clearInterval(timerId);
zurückkehren;
}
index++;
modAttr(index)
}, 3000)
}
Funktion modAttr(index) {
//Legen Sie den Eigenschaftswert des Mix-Blend-Modus fest container.style.setProperty('--mix-blend-mode', Values[index].value);
valueBox.innerHTML = `mix-blend-mode : ${values[index].value};`;
infoBox.innerHTML = `${values[index].name}(${values[index].value}): ${values[index].info}`
}
</script>
</html>Oftmals muss Text neben dem Bild angezeigt werden, wenn die Farbe des Textes und des Bildes nahe beieinander liegt, wird die Lesbarkeit stark beeinträchtigt;
Wie kann ich dafür sorgen, dass sich der Text automatisch an den Hintergrund anpasst?
Mit dem Attribut mix-blend-mode können Sie die Farbmischung von Text und Hintergrund festlegen, um den Effekt zu erzielen, dass sich der Text an den Hintergrund anpasst.
Die Textfarbe ist weiß; bei manchen Bildern ist die Lesbarkeit schlecht;
.grid-item > h3 {
Farbe: RGB (255, 255, 255);
...
}
Setzen Sie das Attribut „mix-blend-mode“ auf „different“ ;
Der Anfangswert der Textfarbe ist Weiß, aber die Differenz wird mit dem Farbwert jedes Pixels berechnet , der dem Hintergrund des übergeordneten Elements entspricht, um einen neuen Farbwert zu erhalten;
Textfarbwert - Hintergrundfarbwert = gemischter Pixelwert (jedes Pixel);
Zum Beispiel: Textfarbe (255, 255, 255), Hintergrundfarbe (255, 255, 255), berechneter Wert (0, 0, 0), schwarz dargestellt;
.grid-item>h3 {
Farbe: RGB (255, 255, 255);
/* Mischmodus einstellen – Differenz berechnen */
Mix-Blend-Modus: Unterschied;
...
}Hinweis: Der Unterschiedsüberblendungsmodus wird hier auf Text angewendet.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text passt sich intelligent dem Hintergrund an</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
.container {
Anzeige: Flex;
Breite: 100vw;
Höhe: 60vh;
rechtfertigen-Inhalt: Mitte;
align-items: center;
}
.grid-container {
Anzeige: Raster;
Rastervorlagenspalten: 400px 400px 400px;
Rastervorlagenzeilen: 200px 200px;
Lücke: 10px;
}
.grid-item {
Hintergrundwiederholung: keine Wiederholung;
Hintergrundgröße: Cover;
Randradius: 6px;
Kastenschatten: 0 0 6px 1px #999;
}
.grid-item>h3 {
Farbe: RGB (255, 255, 255);
Schriftgröße: 36px;
/* Mischmodus einstellen – Differenz berechnen */
Mix-Blend-Modus: Unterschied;
}
.grid-item:nth-child(1) {
/* Hintergrundbild: url("D:\test\zyl-img\bg_1.jpg" */
Hintergrundfarbe: rot
}
.grid-item:nth-child(2) {
/* Hintergrundbild: url("D:\test\zyl-img\bg_2.jpg" */
Hintergrundfarbe: lila;
}
.grid-item:nth-child(3) {
/* Hintergrundbild: url("D:\test\zyl-img\bg_3.jpg" */
Hintergrundfarbe: gelb;
}
.grid-item:nth-child(4) {
/* Hintergrundbild: url("D:\test\zyl-img\bg_4.jpg" */
Hintergrundfarbe: grün;
}
.grid-item:nth-child(5) {
/* Hintergrundbild: url("D:\test\zyl-img\bg_5.jpg" */
Hintergrundfarbe: blaugrün;
}
.grid-item:nth-child(6) {
/* Hintergrundbild: url("D:\test\zyl-img\bg_6.jpg" */
Hintergrundfarbe: blau;
}
</style>
</head>
<Körper>
<div class="container">
<div class="grid-container">
<div class="grid-item">
<h3>Anwendung des Mix-Blend-Mode-Attributs</h3>
</div>
<div class="grid-item">
<h3>Anwendung des Mix-Blend-Mode-Attributs</h3>
</div>
<div class="grid-item">
<h3>Anwendung des Mix-Blend-Mode-Attributs</h3>
</div>
<div class="grid-item">
<h3>Anwendung des Mix-Blend-Mode-Attributs</h3>
</div>
<div class="grid-item">
<h3>Anwendung des Mix-Blend-Mode-Attributs</h3>
</div>
<div class="grid-item">
<h3>Anwendung des Mix-Blend-Mode-Attributs</h3>
</div>
</div>
</div>
</body>
</html>Damit ist dieser Artikel über die detaillierte Erklärung des Mix-Blend-Mode-Attributs in CSS (Festlegen des Mix-Modus eines Elements) abgeschlossen. Weitere Informationen zum CSS-Mix-Blend-Mode-Attribut finden Sie in früheren Artikeln auf downcodes.com Durchsuchen Sie weiter unten die relevanten Artikel und ich hoffe, dass Sie downcodes.com in Zukunft unterstützen werden!