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
selektor {
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:
<div>
<img src="bg.png">
</div>
div {
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:
<div>
<img src="bg.png">
</div>
div {
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:
<div>
<img src="bg.png">
</div>
div {
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