mix-blend-mode
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
* Some parts of this feature may have varying levels of support.
Die mix-blend-mode
-CSS-Eigenschaft legt fest, wie der Inhalt eines Elements mit dem Inhalt des übergeordneten Elements sowie dem Hintergrund des Elements gemischt werden soll.
Probieren Sie es aus
Syntax
/* Keyword values */
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
mix-blend-mode: plus-darker;
mix-blend-mode: plus-lighter;
/* Global values */
mix-blend-mode: inherit;
mix-blend-mode: initial;
mix-blend-mode: revert;
mix-blend-mode: revert-layer;
mix-blend-mode: unset;
Werte
<blend-mode>
-
Der anzuwendende Mischmodus.
plus-darker
-
Mischen mithilfe des plus-darker-Compositing-Operators.
plus-lighter
-
Mischen mithilfe des plus-lighter-Compositing-Operators. Nützlich für Überblendungseffekte (verhindert unerwünschtes Flackern, wenn zwei überlagernde Elemente ihre Deckkraft in entgegengesetzten Richtungen animieren).
Formale Definition
Anfangswert | normal |
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | Not animatable |
Erstellt Stapelkontext | Ja |
Formale Syntax
Beispiele
Wirkung verschiedener mix-blend-mode-Werte
Verwendung von mix-blend-mode mit HTML
HTML
<div class="isolate">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
<div class="circle circle-3"></div>
</div>
CSS
.circle {
width: 80px;
height: 80px;
border-radius: 50%;
mix-blend-mode: screen;
position: absolute;
}
.circle-1 {
background: red;
}
.circle-2 {
background: lightgreen;
left: 40px;
}
.circle-3 {
background: blue;
left: 20px;
top: 40px;
}
.isolate {
isolation: isolate; /* Without isolation, the background color will be taken into account */
position: relative;
}
Ergebnis
Verwendung von mix-blend-mode mit SVG
SVG
<svg>
<g class="isolate">
<circle cx="40" cy="40" r="40" fill="red" />
<circle cx="80" cy="40" r="40" fill="lightgreen" />
<circle cx="60" cy="80" r="40" fill="blue" />
</g>
</svg>
CSS
circle {
mix-blend-mode: screen;
}
.isolate {
isolation: isolate;
} /* Without isolation, the background color will be taken into account */
Ergebnis
Verwendung von mix-blend-mode mit Text
Dieses Beispiel verwendet mix-blend-mode
, um die Schriftfarbe mit der Hintergrundfarbe des übergeordneten Elements zu mischen.
HTML
<div class="container">
<p>Mostly Harmless</p>
<p class="multiply">Mostly Harmless</p>
<p class="screen">Mostly Harmless</p>
<p class="hard-light">Mostly Harmless</p>
</div>
CSS
@import url("https://fonts.googleapis.com/css2?family=Rubik+Moonrocks&display=swap");
.container {
background-color: blue;
}
p {
font:
4rem "Rubik Moonrocks",
cursive;
font-weight: bold;
color: orange;
padding: 0.5rem;
margin: 0;
}
.multiply {
mix-blend-mode: multiply;
}
.screen {
mix-blend-mode: screen;
}
.hard-light {
mix-blend-mode: hard-light;
}
Ergebnis
Spezifikationen
Specification |
---|
Compositing and Blending Level 2 # mix-blend-mode |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
mix-blend-mode | ||||||||||||
plus-darker | ||||||||||||
plus-lighter | ||||||||||||
On SVG elements |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.