CSS background-blend-mode-Eigenschaft
Die background-blend-mode-Eigenschaft ist eine CSS-Eigenschaft, die das Mischen der Hintergrundbilder untereinander und mit der Hintergrundfarbe definiert. Sie hat 10 Werte: normal, multiply, screen, overlay, darken, lighten, color-dodge, saturation, color, luminosity. Der Standardwert ist normal.
Wenn es mehrere Hintergrundebenen gibt und diese eine angegebene Liste von Mischmodi haben, sollte background-blend-mode in der gleichen Reihenfolge wie background-image angewendet werden. Wenn es nicht genügend Werte gibt, um die Anzahl der Ebenen abzudecken, muss die Liste der Werte wiederholt werden, bis genügend vorhanden sind.
Die background-blend-mode-Eigenschaft wird verwendet, um Hintergrundebenen zu mischen.
| Anfangswert | normal |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.backgroundBlendMode = "luminosity"; |
Syntax
Syntax der CSS background-blend-mode-Eigenschaft
background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;Beispiel für die background-blend-mode-Eigenschaft:
Beispiel für die CSS background-blend-mode-Eigenschaft mit dem Wert normal
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://de.w3docs.com/build/images/w3docs-logo-black.png"), url("https://de.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: normal;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Ergebnis
Im folgenden Beispiel können Sie ausprobieren und sehen, wie die Hintergrundbilder gemischt werden:
Beispiel für die background-blend-mode-Eigenschaft mit dem Wert "screen":
Beispiel für die CSS background-blend-mode-Eigenschaft mit dem Wert screen
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://de.w3docs.com/build/images/w3docs-logo-black.png"), url("https://de.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: screen;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Beispiel für die background-blend-mode-Eigenschaft mit dem Wert "color-dodge":
Beispiel für die CSS background-blend-mode-Eigenschaft mit dem Wert color-dodge
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://de.w3docs.com/build/images/w3docs-logo-black.png"), url("https://de.w3docs.com/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>Beispiel für die background-blend-mode-Eigenschaft mit dem Wert "multiply":
Beispiel für die CSS background-blend-mode-Eigenschaft mit dem Wert multiply
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://de.w3docs.com/build/images/w3docs-logo-black.png"), url("https://de.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: multiply;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Beispiel für die background-blend-mode-Eigenschaft mit dem Wert "overlay":
Beispiel für die background-blend-mode-Eigenschaft mit dem Wert "overlay":
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://de.w3docs.com/build/images/w3docs-logo-black.png"), url("https://de.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: overlay;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Beispiel für die background-blend-mode-Eigenschaft mit dem Wert "darken":
Beispiel für die background-blend-mode-Eigenschaft mit dem Wert "darken":
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://de.w3docs.com/build/images/w3docs-logo-black.png"), url("https://de.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: darken;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Beispiel für die background-blend-mode-Eigenschaft mit dem Wert "saturation":
Beispiel für die background-blend-mode-Eigenschaft mit dem Wert "saturation":
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("https://de.w3docs.com/build/images/w3docs-logo-black.png"), url("https://de.w3docs.com/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: saturation;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| normal | Legt den Mischmodus auf normal fest. | Ausprobieren » |
| multiply | Legt den Mischmodus auf multiply fest. | Ausprobieren » |
| screen | Legt den Mischmodus auf screen fest. | Ausprobieren » |
| overlay | Legt den Mischmodus auf overlay fest. | Ausprobieren » |
| darken | Legt den Mischmodus auf darken fest. | Ausprobieren » |
| lighten | Legt den Mischmodus auf lighten fest. | Ausprobieren » |
| color-dodge | Legt den Mischmodus auf color-dodge fest. | Ausprobieren » |
| saturation | Legt den Mischmodus auf saturation fest. | Ausprobieren » |
| color | Legt den Mischmodus auf color fest. | Ausprobieren » |
| luminosity | Legt den Mischmodus auf luminosity fest. | Ausprobieren » |
Praxis
Was macht die CSS background-blend-mode-Eigenschaft?