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.

Die mix-blend-mode CSS Eigenschaft legt fest, wie der Inhalt eines Elements mit dem Inhalt des Elternelements und dem Hintergrund des Elements gemischt werden soll.

Probieren Sie es aus

Syntax

css
/* 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 mit dem plus-darker Compositing-Operator.

plus-lighter

Mischen mit dem plus-lighter Compositing-Operator. Nützlich für Cross-Fade-Effekte (verhindert unerwünschtes Blinken, wenn zwei überlagernde Elemente ihre Deckkraft in entgegengesetzte Richtungen animieren).

Formale Definition

Initialer Wertnormal
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertwie angegeben
AnimationstypNot animatable
Erstellt StapelkontextJa

Formale Syntax

mix-blend-mode = 
  <blend-mode>  |
  plus-darker   |
  plus-lighter  

<blend-mode> = 
  normal       |
  multiply     |
  screen       |
  overlay      |
  darken       |
  lighten      |
  color-dodge  |
  color-burn   |
  hard-light   |
  soft-light   |
  difference   |
  exclusion    |
  hue          |
  saturation   |
  color        |
  luminosity

Beispiele

Effekt verschiedener mix-blend-mode Werte

Verwendung von mix-blend-mode mit HTML

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

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

html
<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

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

In diesem Beispiel wird mix-blend-mode verwendet, um die Textfarbe mit der Hintergrundfarbe des übergeordneten Elements zu mischen.

HTML

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

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

BCD tables only load in the browser

Siehe auch