De eigenschap mix-blend-mode

De eigenschap mix-blend-mode specificeert de mengmodus van de bronkleur op de achtergrondkleur of achtergrondafbeelding. De waarden voor de eigenschap zijn vergelijkbaar met de belangrijkste modi van grafische editors.

Syntaxis

cssselector {
  mix-blend-mode: waarden;
}

In de tabel worden de belangrijkste waarden voor de eigenschap mix-blend-mode weergegeven:

Waarden

Waarde	Beschrijving
`normal`	Normaal. Er wordt geen kleurmenging gebruikt. Standaard modus.
`multiply`	Vermenigvuldigen. In deze modus wordt de waarde van de bronkleur vermenigvuldigd met de waarde van de gemengde kleur. De resulterende kleur is altijd een donkerdere kleur.
`screen`	Scherm. In deze modus worden de omgekeerde waarden van de bronkleur en de gemengde kleur vermenigvuldigd. Als resulterende kleur wordt altijd een lichtere kleur toegepast.
`overlay`	Overlay. In deze modus worden kleuren vermenigvuldigd of verlicht afhankelijk van de bronkleur. Patronen of kleuren bedekken bestaande pixels, waarbij de lichte en donkere gebieden van de bronkleur onveranderd blijven.

Voorbeeld

Laten we eens kijken hoe een afbeelding eruitziet met de standaardwaarde van de eigenschap mix-blend-mode:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: normal;
  width: 400px;
  height: 300px;
}

Результат:

Voorbeeld

Laten we nu de mengmodus wijzigen naar vermenigvuldigen:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: multiply;
  width: 400px;
  height: 300px;
}

Результат:

Voorbeeld

Laten we de eigenschap mix-blend-mode de waarde overlay geven:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: overlay;
  width: 400px;
  height: 300px;
}

Результат:

Zie ook

de eigenschap background,
een verkorte eigenschap voor de achtergrond
de eigenschap background-image,
waarmee een blok een achtergrondafbeelding kan krijgen
de eigenschap background-blend-mode,
waarmee een achtergrondafbeelding op een achtergrondkleur kan worden geplaatst