Egenskapen mix-blend-mode

Egenskapen mix-blend-mode anger läget för hur källfärgen blandas med bakgrundsfärgen eller bakgrundsbilden. Värdena för egenskapen motsvarar de huvudsakliga lägena i bildbehandlingsprogram.

Syntax

cssselektor {
  mix-blend-mode: värden;
}

Tabellen presenterar de huvudsakliga värdena för egenskapen mix-blend-mode:

Värden

Värde	Beskrivning
`normal`	Normal. Ingen färgblandning används. Standardläge.
`multiply`	Multiplikation. I detta läge multipliceras värdet av källfärgen med värdet av bakgrundsfärgen. Resulterande färg är alltid en mörkare färg.
`screen`	Skärm. I detta läge multipliceras de inverterade värdena av källfärgen och bakgrundsfärgen. Resulterande färg blir alltid en ljusare färg.
`overlay`	Överlagring. I detta läge multipliceras eller ljusas färgerna upp beroende på bakgrundsfärgen. Mönster eller färger överlagrar befintliga pixlar, medan ljusa och mörka områden i bakgrundsfärgen förblir oförändrade.

Exempel

Låt oss se hur en bild kommer att se ut med standardvärdet för egenskapen 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;
}

Результат:

Exempel

Låt oss nu ändra blandningsläget till multiplikation:

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

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

Результат:

Exempel

Låt oss ange värdet överlagring för egenskapen mix-blend-mode:

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

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

Результат:

Se även

egenskapen background,
som är en sammanfattande egenskap för bakgrund
egenskapen background-image,
som används för att ange en bakgrundsbild för ett element
egenskapen background-blend-mode,
som används för att blanda en bakgrundsbild med en bakgrundsfärg