CSS/Eigenschaften/Hintergrundfarben und -bilder/background-blend-mode

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der background-blend-mode-Eigenschaft können Sie festlegen, wie sich die Hintergrundbilder eines Elements, sowie dessen Hintergrundfarbe, miteinander vermischen.

  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari

Details: caniuse.com

Information

Für die Überblendung mehrerer übereinanderliegender HTML- oder SVG-Elemente gibt es die CSS-Eigenschaft mix-blend-mode.


Beispiel ansehen …
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;
}
Das Beispiel erlaubt die verschiedenen Blendmodi auszuprobieren.

Inhaltsverzeichnis

[Bearbeiten] Blend-Modi

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.

Beispiel ansehen …
<h1>Demonstration von Blendmodi</h1>
Das Beispiel erlaubt die verschiedenen Blendmodi interaktiv auszuprobieren.

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: multiply oder screen, 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: multiply oder screen, abhängig von der Vordergrundfarbe
  • soft-light: darken oder lighten, abhängig von den Farbwerten
  • difference: die dunklere Farbe wird von der helleren subtrahiert
  • exclusion: ähnlich wie difference
  • 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
Beachten Sie: Safari unterstützt die Blend-Modi: hue, saturation, color und luminosity nicht.


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.

[Bearbeiten] Bildquelle

[Bearbeiten] Fazit

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.

[Bearbeiten] Weblinks


Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML