CSS mix-blend-mode eigenschap

Definitie en gebruik

De mix-blend-mode eigenschap bepaalt hoe de inhoud van een element moet worden gemengd met de achtergrond van zijn directe ouder.

Zie ook:

CSS referentiehandleiding:CSS background-blend-mode Eigenschap

Voorbeeld

Een container met rode achtergrond en een afbeelding die met deze rode container vermengt (donker):

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

Probeer het zelf

Meer TIY voorbeelden zijn te vinden onderaan de pagina.

CSS syntaxis

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

Eigenschapswaarde

Waarde Beschrijving
normal Dit is de standaardwaarde. Stel de mixmodus in op normaal.
multiply Stel de mixmodus in op multiply.
screen Stel de mixmodus in op screen.
overlay Stel de mixmodus in op overlay.
darken Stel de mixmodus in op darken.
lighten Stel de mixmodus in op lighten.
color-dodge Stel de mixmodus in op color-dodge.
color-burn Stel de mixmodus in op color-burn.
difference Stel de mixmodus in op difference.
exclusion Stel de mixmodus in op exclusion.
hue Stel de mixmodus in op hue.
saturation Stel de mixmodus in op saturation.
color Stel de mixmodus in op color.
luminosity Stel de mixmodus in op luminosity.

Technische details

Standaardwaarde: normal
Inheritantie: Nee
Animatieproductie: Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
JavaScript syntaxis: object.style.mixBlendMode = "darken"

Meer voorbeelden

Voorbeeld

Demonstreer alle waarden:

.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;}

Probeer het zelf

Voorbeeld

Gebruik mix-blend-mode om responsieve cutout/knockout tekst (uitknip tekst) te maken:

.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;
}

Probeer het zelf

Browserondersteuning

Tafelnummers vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

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