w3docs logo

CSS-Eigenschaft background-blend-mode

The background-blend-mode ist eine CSS-Eigenschaft, die das Mischen von background images untereinander und mit background-color definiert. Es hat 10 Werte: normal, multiply, screen, overlay, darken, lighten, color-dodge, saturation, color, luminosity. Der Standardwert ist normal.

Anfangswert normal
Gilt für Alle Elemente. Es gilt auch für ::first-letter und ::first-line.
Geerbt Nein
Animierbar Nein
Version CSS3
DOM Syntax object.style.backgroundBlendMode = "luminosity";

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      div { 
      width: 400px;
      height: 400px;
      background-repeat: no-repeat, repeat;
      background-image: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
      background-blend-mode: normal;
      background-size: 280px;
      background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

In diesem Beispiel haben wir den Wert "screen" verwendet. Testen Sie, wie der Wert die Hintergrundsbilder mischt.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      div { 
      width: 400px;
      height: 400px;
      background-repeat: no-repeat, repeat;
      background-image: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
      background-blend-mode: screen;
      background-size: 280px;
      background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

In diesem Beispiel ist der Wert "color-dodge" eingestellt.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      div { 
      width: 400px;
      height: 400px;
      background-repeat: no-repeat, repeat;
      background-image: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
      background-blend-mode: color-dodge;
      background-size: 280px;
      background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Sehen Sie sich ein anderes Beispiel mit dem Wert "multiply".

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      div { 
      width: 400px;
      height: 400px;
      background-repeat: no-repeat, repeat;
      background-image: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
      background-blend-mode: multiply;
      background-size: 280px;
      background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Werte

Wert Beschreibung
normal Setzt den Mischmodus auf normal.
multiply Setzt den Mischmodus auf multiply.
screen Setzt den Mischmodus auf screen.
overlay Setzt den Mischmodus auf overlay.
darken Setzt den Mischmodus auf darken.
lighten Setzt den Mischmodus auf lighten.
color-dodge Setzt den Mischmodus auf color-dodge.
saturnation Setzt den Mischmodus auf saturation.
color Setzt den Mischmodus auf color.
luminosity Setzt den Mischmodus auf luminosity.

Browser-Support

chrome firefox safari opera
35+ 30+ 10.1+ 22+

Übe dein Wissen

Was bewirkt die CSS-Eigenschaft 'background-blend-mode'?
Finden Sie das nützlich?