Egenskapen mix-blend-mode

Egenskapen mix-blend-mode angir blandingmodusen for kildefargen på bakgrunnsfargen eller bakgrunnsbildet. Verdiene for egenskapen er analoge med hovedmodusene i grafiske redigeringsprogrammer.

Syntaks

cssvelger {
  mix-blend-mode: verdier;
}

Tabellen presenterer hovedverdiene for egenskapen mix-blend-mode:

Verdier

Verdi	Beskrivelse
`normal`	Normal. Bruker ikke fargeblanding. Standard modus.
`multiply`	Multipliser. I denne modusen multipliseres verdien av kildenfargen med verdien av bakgrunnsfargen. Resulterende farge er alltid en mørkere farge.
`screen`	Skjerm. I denne modusen multipliseres de omvendte verdiene av kildenfargen og bakgrunnsfargen. Den resulterende fargen er alltid en lysere farge.
`overlay`	Overlegg. I denne modusen multipliseres eller lysnes fargene avhengig av bakgrunnsfargen. Mønstre eller farger overlegger eksisterende piksler, og lar de lyse og mørke delene av bakgrunnsfargen forbli uendret.

Eksempel

La oss se hvordan bildet vil se ut med standardverdien for 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;
}

Результат:

Eksempel

La oss nå endre blandingmodusen til multiplikasjon:

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

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

Результат:

Eksempel

La oss sette egenskapen mix-blend-mode til overleggsverdi:

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

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

Результат:

Se også

egenskapen background,
som er en snarveisegenskap for bakgrunn
egenskapen background-image,
som kan brukes til å sette bakgrunnsbilde på et element
egenskapen background-blend-mode,
som kan brukes til å blande bakgrunnsbilde med bakgrunnsfarge