CSS mix-blend-mode Eigenschaft

Definition und Verwendung

Die Property mix-blend-mode legt fest, wie der Inhalt eines Elements mit dem Hintergrund seines direkten Elternbehälters verschmolzen wird.

Siehe auch:

CSS-Referenzhandbuch:CSS-background-blend-mode-Eigenschaft

实例

Ein Behälter mit rotem Hintergrund und ein mit diesem roten Behälter verschmolzenes Bild (dunkel):

.container {
  background-color: red;
}
.container img {
  mix-blend-mode: darken;
}

亲自试一试

Mehr TIY-Beispiele finden Sie unten auf der Seite.

CSS-Syntax

mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;

Wert des Attributs

Werte Beschreibung
normal Dies ist der Standardwert. Setzen Sie den Mischmodus auf Normal.
Multiplizieren Setzen Sie den Mischmodus auf Multiplizieren.
Bildschirm Setzen Sie den Mischmodus auf Bildschirm.
Überlagerung Setzen Sie den Mischmodus auf Überlagerung.
Abdunkeln Setzen Sie den Mischmodus auf Abdunkeln.
Aufhellen Setzen Sie den Mischmodus auf Aufhellen.
Farbvermischung Setzen Sie den Mischmodus auf Farbvermischung.
Farbverbrännung Setzen Sie den Mischmodus auf Farbverbrännung.
Differenz Setzen Sie den Mischmodus auf Differenz.
Ausschluss Setzen Sie den Mischmodus auf Ausschluss.
Farbton Setzen Sie den Mischmodus auf Farbton.
Sättigung Setzen Sie den Mischmodus auf Sättigung.
Farbe Setzen Sie den Mischmodus auf Farbe.
Luminanz Setzen Sie den Mischmodus auf Luminanz.

Technische Details

Standardwert: normal
Vererbung: Nein
Animationserstellung: Nicht unterstützt. Bitte lesen Sie:Animationsspezifische Eigenschaften.
JavaScript-Syntax: object.style.mixBlendMode = "darken"

Mehr Beispiele

实例

Demonstration aller Werte:

.normal {mix-blend-mode: normal;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode: color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion {mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation {mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}

亲自试一试

实例

使用 mix-blend-mode 来创建响应式 cutout/knockout 文本（抠图文本）：

.image-container {
  background-image: url("paris.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

亲自试一试

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

Chrome IE / Edge Firefox Safari Opera
41.0 79.0 32.0 8.0 35.0