CSS-Eigenschaft mix-blend-mode
Die Eigenschaft mix-blend-mode definiert die Überblendung des Inhalts eines Elements mit dem Hintergrund seines direkten Elternelements. Für die Überblendung benötigen Sie background-image, background-color oder ein <img>.
In CSS stehen 16 Mischmodi zur Verfügung. Wenn für ein Element ein anderer Wert als „normal“ (Standardwert) festgelegt wird, wird für dieses Element ein neuer Stacking-Kontext erstellt. Eine neu gebildete Gruppe sollte dann mit dem Stacking-Kontext überblendet werden, der das Element enthält. Das Element wird nicht mit dem Inhalt außerhalb des Stacking-Kontexts überblendet.
Jede Eigenschaft, die dazu führt, dass ein Stacking-Kontext erstellt wird, kann sich auf die Überblendung auswirken.
Sie können die Eigenschaft isolation verwenden, um ein Element zu isolieren.
TIP
Wenn Sie die Hintergrundbilder eines Elements miteinander überblenden möchten, können Sie die Eigenschaft background-blend-mode verwenden.
| Initial Value | normal |
|---|---|
| Applies to | All elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS1 |
| DOM Syntax | object.style.mixBlendMode = "exclusion"; |
Syntax
Syntax der CSS-Eigenschaft mix-blend-mode
mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity | initial | inherit;Beispiel für die Eigenschaft mix-blend-mode:
Beispiel der CSS-Eigenschaft mix-blend-mode mit dem Wert multiply
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example {
background-color: #8ebf42;
height: 800px;
}
img {
width: 100%;
height: auto;
float: left;
mix-blend-mode: multiply;
}
</style>
</head>
<body>
<h2>Mix-blend-mode property example</h2>
<h3>Mix-blend-mode: multiply</h3>
<div class="example">
<img src="https://de.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
</div>
</body>
</html>Beispiel für die Eigenschaft mix-blend-mode mit dem Wert "screen":
Beispiel der CSS-Eigenschaft mix-blend-mode mit dem Wert screen
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example {
background-color: #8ebf42;
height: 800px;
}
img {
width: 100%;
height: auto;
float: left;
mix-blend-mode: screen;
}
</style>
</head>
<body>
<h2>Mix-blend-mode property example</h2>
<h3>Mix-blend-mode: screen</h3>
<div class="example">
<img src="https://de.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
</div>
</body>
</html>Beispiel für die Eigenschaft mix-blend-mode mit dem Wert "color-dodge":
Beispiel der CSS-Eigenschaft mix-blend-mode mit dem Wert color-dodge
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example {
background-color: #8ebf42;
height: 800px;
}
img {
width: 100%;
height: auto;
float: left;
mix-blend-mode: color-dodge;
}
</style>
</head>
<body>
<h2>Mix-blend-mode property example</h2>
<h3>Mix-blend-mode: color-dodge</h3>
<div class="example">
<img src="https://de.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
</div>
</body>
</html>Beispiel für die Eigenschaft mix-blend-mode mit dem Wert "hue":
Beispiel der CSS-Eigenschaft mix-blend-mode mit dem Wert hue
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example {
background-color: #8ebf42;
height: 800px;
}
img {
width: 100%;
height: auto;
float: left;
mix-blend-mode: hue;
}
</style>
</head>
<body>
<h2>Mix-blend-mode property example</h2>
<h3>Mix-blend-mode: hue</h3>
<div class="example">
<img src="https://de.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
</div>
</body>
</html>Beispiel für die Eigenschaft mix-blend-mode mit dem Wert "normal":
CSS-Eigenschaft mix-blend-mode
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #ff0000;
height: 500px;
}
img {
width: 50%;
height: auto;
float: left;
mix-blend-mode: normal;
}
</style>
</head>
<body>
<h2>Mix-blend-mode property example</h2>
<h3>Mix-blend-mode: normal</h3>
<div class="example">
<img src="https://de.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
</div>
</body>
</html>Beispiel für mix-blend-mode mit dem Wert "hard-light":
CSS-Eigenschaft mix-blend-mode
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #ff0000;
height: 400px;
}
img {
width: 50%;
height: auto;
float: left;
mix-blend-mode: hard-light;
}
</style>
</head>
<body>
<h2>Mix-blend-mode property example</h2>
<h3>Mix-blend-mode: hard-light</h3>
<div class="example">
<img src="https://de.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
</div>
</body>
</html>Beispiel für mix-blend-mode mit dem Wert "difference":
CSS-Eigenschaft mix-blend-mode
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #ff0000;
height: 400px;
}
img {
width: 50%;
height: auto;
float: left;
mix-blend-mode: difference;
}
</style>
</head>
<body>
<h2>Mix-blend-mode property example</h2>
<h3>Mix-blend-mode: difference</h3>
<div class="example">
<img src="https://de.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
</div>
</body>
</html>Werte
| Value | Description |
|---|---|
| normal | Legt den Mischmodus auf normal fest. Dies ist der Standardwert dieser Eigenschaft. |
| multiply | Legt den Mischmodus auf multiply fest. |
| screen | Legt den Mischmodus auf screen fest. |
| overlay | Legt den Mischmodus auf overlay fest. |
| darken | Legt den Mischmodus auf darken fest. |
| lighten | Legt den Mischmodus auf lighten fest. |
| color-dodge | Legt den Mischmodus auf color-dodge fest. |
| color-burn | Legt den Mischmodus auf color-burn fest. |
| exclusion | Legt den Mischmodus auf exclusion fest. |
| difference | Legt den Mischmodus auf difference fest. |
| hue | Legt den Mischmodus auf hue fest. |
| saturation | Legt den Mischmodus auf saturation fest. |
| color | Legt den Mischmodus auf color fest. |
| luminosity | Legt den Mischmodus auf luminosity fest. |
| initial | Veranlasst die Eigenschaft, ihren Standardwert zu verwenden. |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Practice
Which of the following browser versions do not support the CSS mix-blend-mode property?