mix-blend-mode zum Mischen von Ebenen
Mischen Sie Elementfarben mit darunterliegenden Inhalten mithilfe von CSS-Blendmodi nach dem Vorbild von Photoshop.
mix-blend-mode zum Mischen von Ebenen ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist mix-blend-mode?
mix-blend-mode steuert, wie die Pixel eines Elements mit den Pixeln darunterliegender Elemente vermischt werden — ähnlich den Ebenenfüllmethoden in Photoshop. Die Eigenschaft betrifft das gesamte Element einschließlich seines Hintergrunds.
Normal (Standard)
normal ist der Standardwert — es findet keine Mischung statt. Das obere Element verdeckt alles darunter.
multiply
multiply dunkelt ab, indem es die Pixelwerte multipliziert. Weiß wird transparent; Schwarz bleibt schwarz. Ideal, um Bilder mit dunklen Farbtönen über farbigen Hintergründen zu platzieren.
<div class="blend-wrapper">
<div class="texture"></div>
</div>
screen
screen ist das Gegenteil von multiply — es hellt auf. Schwarz wird transparent; Weiß bleibt weiß. Geeignet für Lichteffekte und Leuchten.
<div class="blend-wrapper">
<div class="glow"></div>
</div>
overlay
overlay kombiniert multiply und screen. Dunkle Bereiche werden dunkler, helle Bereiche heller. Der Kontrast wird erhöht, während die Mitteltöne erhalten bleiben.
<div class="blend-wrapper">
<div class="texture"></div>
</div>
difference
difference subtrahiert Farben voneinander. Identische Farben ergeben Schwarz; entgegengesetzte Farben ergeben Weiß. Dadurch entstehen psychedelische Effekte mit hohem Kontrast.
<div class="blend-wrapper"><span class="inverted-text">Invert Me</span></div>
Hard Light und Soft Light
hard-light wendet abhängig von der Quellfarbe multiply oder screen an. soft-light ist eine weichere Variante mit einer geringeren Kontrastverstärkung.
Farbmischmodi
Diese Modi mischen nur bestimmte Farbeigenschaften:
hue— übernimmt den Farbton vom oberen Element, Sättigung und Helligkeit vom darunterliegendensaturation— übernimmt die Sättigung vom oberen Elementcolor— übernimmt Farbton und Sättigung vom oberen Element, die Helligkeit vom darunterliegendenluminosity— übernimmt die Helligkeit vom oberen Element
Farbmodus für Duotone
Erstellen Sie Duotone-Bilder, indem Sie ein farbiges Element mit mix-blend-mode: color darüberlegen:
<div class="duotone"></div>
Invertierter Texteffekt
Text, der vor jedem Hintergrund invertiert erscheint:
<div class="blend-wrapper"><span class="inverted-label">Adaptive Label</span></div>
Stacking Contexts und Blendmodus
mix-blend-mode mischt Elemente innerhalb desselben Stacking Contexts. Die Eigenschaft isolation: isolate bei einem übergeordneten Element erzeugt einen neuen Stacking Context und verhindert, dass Blendmodi Elemente außerhalb der isolierten Gruppe beeinflussen.
Kurzer Test
Welcher Blendmodus macht weiße Bereiche eines Elements transparent und erhält farbige oder dunkle Bereiche — wie transparentes Papier?
Zusammenfassung
mix-blend-mode mischt die Pixel eines Elements mit darunterliegendem Inhalt. Wichtige Modi: multiply (dunkelt ab, Weiß → transparent), screen (hellt auf, Schwarz → transparent), overlay (verstärkt den Kontrast), difference (Subtraktion), color (färbt Bilder um). Verwenden Sie isolation: isolate beim übergeordneten Element, um den Geltungsbereich der Mischung zu begrenzen.
Häufig gestellte Fragen
Ist die Lektion „mix-blend-mode zum Mischen von Ebenen“ kostenlos?
Ja — der vollständige Text von „mix-blend-mode zum Mischen von Ebenen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „mix-blend-mode zum Mischen von Ebenen“?
Mischen Sie Elementfarben mit darunterliegenden Inhalten mithilfe von CSS-Blendmodi nach dem Vorbild von Photoshop. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „mix-blend-mode zum Mischen von Ebenen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- filter: blur, brightness, contrast, grayscale
- backdrop-filter für Milchglaseffekte
- mix-blend-mode zum Mischen von Ebenen
- Die Eigenschaft isolation