⌘K

Ominaisuus mix-blend-mode

Ominaisuus mix-blend-mode asettaa värien sekoitustilan, jolla lähdeväri sekoittuu taustavärin tai taustakuvan kanssa. Ominaisuuden arvot vastaavat graafisten editorien pääasiallisia tiloja.

Syntaksi

cssvalitsija {
  mix-blend-mode: arvot;
}

Taulukossa esitetään mix-blend-mode-ominaisuuden pääasialliset arvot:

Arvot

Arvo Kuvaus
normal Tavallinen. Värien sekoitusta ei käytetä. Oletustila.
multiply Monista. Tässä tilassa lähdevärin arvo kerrotaan taustavärin arvolla. Tuloksena oleva väri on aina tummempi väri.
screen Valaise. Tässä tilassa lähde- ja taustavärien käänteisarvot kerrotaan keskenään. Tuloksena käytetään aina vaaleampaa väriä.
overlay Päällekkäin. Tässä tilassa värit joko kerrotaan tai vaalennetaan taustavärin mukaan. Kuviot tai värit peittävät olemassa olevat pikselit, jättäen taustavärin vaaleat ja tummat alueet ennalleen.

Esimerkki

Katsotaan miltä kuva näyttää mix-blend-mode-ominaisuuden oletusarvolla: 

html<div>
  <img src="bg.png">
</div>
cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: normal;
  width: 400px;
  height: 300px;
}

Результат:

Esimerkki

Muutetaan nyt sekoitustila monistukseksi: 

html<div>
  <img src="bg.png">
</div>
cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: multiply;
  width: 400px;
  height: 300px;
}

Результат:

Esimerkki

Asetetaan mix-blend-mode-ominaisuudelle päällekkäin-arvo: 

html<div>
  <img src="bg.png">
</div>
cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: overlay;
  width: 400px;
  height: 300px;
}

Результат:

Katso myös

BackOminaisuus background-blend-modeNextFilter-ominaisuus