CSS-background-blend-mode Eigenschaft

Definition and usage

background-blend-mode The attribute defines the blending mode of each background layer (color and/or image).

See also:

CSS Tutorial:CSS Hintergrund

Beispiel

Specify the blending mode of the background image as "lighten" (brighten):

div { 
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: lighten;
}

Versuchen Sie es selbst

You can see more TIY examples at the end of the page.

CSS Syntax

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

Attribute value

Value Description
normal Default. Set the blending mode to normal.
multiply Set the blending mode to multiply (multiply).
screen Set the blending mode to screen (screen).
overlay Set the blending mode to overlay (cover).
darken Set the blending mode to overlay (cover).
lighten Set the blending mode to lighten (brighten).
color-dodge Setzen Sie den Mischmodus auf color-dodge (Farbverdünnung).
saturation Setzen Sie den Mischmodus auf saturation (Sättigung).
color Setzen Sie den Mischmodus auf color (Farbe).
luminosity Setzen Sie den Mischmodus auf luminosity (Helligkeit).

Technische Details

Standardwert: normal
Vererbung: Nein
Animationserstellung: Nicht unterstützt. Siehe auch:Animationsspezifische Attribute.
Version: CSS3
JavaScript-Syntax: object.style.backgroundBlendMode="screen"

Mehr Beispiele

Beispiel

Setzen Sie den Mischmodus auf "multiply":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: multiply;
}

Versuchen Sie es selbst

Beispiel

Setzen Sie den Mischmodus auf "screen":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: screen;
}

Versuchen Sie es selbst

Beispiel

Setzen Sie den Mischmodus auf "overlay":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: overlay;
}

Versuchen Sie es selbst

Beispiel

Setzen Sie den Mischmodus auf "darken":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: darken;
}

Versuchen Sie es selbst

Beispiel

Setzen Sie den Mischmodus auf "color-dodge":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color-dodge;
}

Versuchen Sie es selbst

Beispiel

Setzen Sie den Mischmodus auf "saturation":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: saturation;
}

Versuchen Sie es selbst

Beispiel

Setzen Sie den Mischmodus auf "color":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color;
}

Versuchen Sie es selbst

Beispiel

Setzen Sie den Mischmodus auf "luminosity":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: luminosity;
}

Versuchen Sie es selbst

Beispiel

Setzen Sie den Mischmodus auf "normal":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: normal;
}

Versuchen Sie es selbst

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Safari
Chrome Edge Firefox Safari Safari
Opera 35.0 79.0 30.0 7.1