CSS background-blend-mode Property

Definitie en gebruik

background-blend-mode De eigenschap definieert het mengmodel van elke achtergrondlaag (kleur en/or afbeelding).

Zie ook:

CSS handleiding:CSS achtergrond

Voorbeeld

Specificeer het mengmodel van de achtergrondafbeelding als "lighten" (verlichten):

div { 
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: lighten;
}

Probeer het zelf

U kunt meer TIY voorbeelden zien aan het einde van de pagina.

CSS syntaxis

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

Waarde van eigenschap

Waarde Beschrijving
normal Standaard. Stel het mengmodel in op normaal.
multiply Stel het mengmodel in op multiply (vermenigvuldigen).
screen Stel het mengmodel in op screen (scherm).
overlay Stel het mengmodel in op overlay (overschrijven).
darken Stel het mengmodel in op overlay (overschrijven).
lighten Stel het mengmodel in op lighten (verlichten).
color-dodge Stel de mengmodus in op color-dodge (kleurverlichting).
saturation Stel de mengmodus in op saturation (saturatie).
color Stel de mengmodus in op color (kleur).
luminosity Stel de mengmodus in op luminosity (helderheid).

Technische details

Standaardwaarde: normal
Inheritance: Nee
Animatieproductie: Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS3
JavaScript syntaxis: object.style.backgroundBlendMode="screen"

Meer voorbeelden

Voorbeeld

Stel de mengmodus in op "multiply"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: multiply;
}

Probeer het zelf

Voorbeeld

Stel de mengmodus in op "screen"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: screen;
}

Probeer het zelf

Voorbeeld

Stel de mengmodus in op "overlay"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: overlay;
}

Probeer het zelf

Voorbeeld

Stel de mengmodus in op "darken"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: darken;
}

Probeer het zelf

Voorbeeld

Stel de mengmodus in op "color-dodge"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color-dodge;
}

Probeer het zelf

Voorbeeld

Stel de mengmodus in op "saturation"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: saturation;
}

Probeer het zelf

Voorbeeld

Stel de mengmodus in op "color"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color;
}

Probeer het zelf

Voorbeeld

Stel de mengmodus in op "luminosity"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: luminosity;
}

Probeer het zelf

Voorbeeld

Stel de mengmodus in op "normal"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: normal;
}

Probeer het zelf

Browserondersteuning

Tabelnummers geven de eerste browserversie aan die de eigenschap volledig ondersteunt.

Chrome Edge Firefox Safari Safari
Chrome Edge Firefox Safari Safari
Opera 35.0 79.0 30.0 7.1