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
velger {
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:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: normal;
width: 400px;
height: 300px;
}
:
Eksempel
La oss nå endre blandingmodusen til multiplikasjon:
<div>
<img src="bg.png">
</div>
div {
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:
<div>
<img src="bg.png">
</div>
div {
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