CSS/Eigenschaften/Hintergrundfarben und -bilder/background-blend-mode
Mit der background-blend-mode-Eigenschaft können Sie festlegen, wie sich die Hintergrundbilder eines Elements, sowie dessen Hintergrundfarbe, miteinander vermischen.
Details: caniuse.com
Information
div {
width: 250px;
height: 250px;
margin: 0 3em;
background-image: url("Selflogo.png"), url("Rainbow.jpg");
background-repeat: no-repeat, no-repeat;
background-position: center, center;
box-shadow: 5px 5px 5px 0 #aaaaaa;
background-blend-mode: normal;
}
Inhaltsverzeichnis
Blend-Modi[Bearbeiten]
Die (Anzahl der) Werte der Blend-Modi sollten zu den in der background-image-Eigenschaft definierten Bildern passen. Stimmt die Anzahl nicht überein, werden sie wiederholt oder abgeschnitten, bis jedem Hintergrundbild ein Blend-Modus zugeordnet werden kann.
Ein Blend-Modus ist eine Rechenmethode um den endgültigen Farbwert eines Pixels zu berechnen, wenn sich verschiedene Ebenen überlappen. Jeder Blendmodus verwendet für jeden einzelnen Bildpunkt die Farbwerte von Vorder- und Hintergrund, berechnet die Vermischung und gibt einen Farbwert zurück. Die endgültige, sichtbare Schicht ist das Ergebnis dieser Berechnung aller übereinanderliegenden Pixel der vermischten Ebenen.
<h1>Demonstration von Blendmodi</h1>
Die Erläuterungen gehen von einer Hintergrundfarbe und einer Vordergrundfarbe aus.
Folgende Werte sind möglich:
-
normal: keine Vermischung, der Farbwert ist der des Vordergrundes, Standardwert -
multiply: die Farbwerte werden multipliziert, das Ergebnis ist nicht heller als die Ausgangsfarben -
screen: die Farbwerte der Komplementärfarben werden multipliziert, das Ergebnis ist nicht dunkler als die Ausgangsfarben -
overlay:multiplyoderscreen, abhängig von der Hintergrundfarbe -
darken: die dunklere der beiden Farben -
lighten: die hellere der beiden Farben -
color-dodge: hellt die Hintergrundfarbe auf -
color-burn: dunkelt die Hintergrundfarbe ab -
hard-light:multiplyoderscreen, abhängig von der Vordergrundfarbe -
soft-light:darkenoderlighten, abhängig von den Farbwerten -
difference: die dunklere Farbe wird von der helleren subtrahiert -
exclusion: ähnlich wiedifference -
hue: erzeugt eine Farbe mit dem Farbton der Vordergrundfarbe und der Sättigung und Helligkeit der Hintergrundfarbe -
saturation: erzeugt eine Farbe mit der Sättigung der Vordergrundfarbe und dem Farbton und der Helligkeit der Hintergrundfarbe -
color: erzeugt eine Farbe mit dem Farbton und der Sättigung der Vordergrundfarbe und der Leuchtkraft der Hintergrundfarbe -
luminosity: erzeugt eine Farbe mit der Leuchtkraft der Vordergrundfarbe und dem Farbton und der Sättigung der Hintergrundfarbe
hue, saturation, color und luminosity nicht.
- Screenshots der Ergebnisse
normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity
Vertauscht man die Reihenfolge der Bilder, ändern sich auch einige Ergebnisse. So liefert bei vertauschten Grafiken etwa overlay dasselbe Resultat wie hard-light, wenn die Grafiken unvertauscht bleiben.
- Screenshots der Ergebnisse
hard-light
overlay
Bildquelle[Bearbeiten]
Fazit[Bearbeiten]
Auch wenn es sicherlich nicht viele praktische Anwendungsmöglichkeiten für diese Eigenschaft gibt, lassen sich so doch spektakuläre Effekte erzielen, für die Sie bis jetzt teure Grafik-Programme benötigten.
Weblinks[Bearbeiten]
- Webkrauts: Blend-Modes
- Wikipedia: Blend modes (Englisch)
