Ominaisuus background-blend-mode

Ominaisuus background-blend-mode määrittää taustakuvan ja taustavärin tai muiden kuvien sekoitustavan. Tässä ominaisuudessa voidaan myös määrittää useita arvoja pilkuilla eroteltuna, joita sovelletaan samassa järjestyksessä. Ominaisuuden arvot vastaavat graafisten editorien pääasiallisia sekoitustiloja.

Syntaksi

cssvalitsija {
  background-blend-mode: tilat;
}

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

Arvot

Arvo	Kuvaus
`normal`	Tavallinen. Värien sekoitusta ei käytetä. Oletustila.
`multiply`	Kertolasku. Tässä tilassa päällimmäisen värin arvo kerrotaan taustavärin arvolla. Tuloksena oleva väri on aina tummempi väri.
`screen`	Valotuksen poisto. Tässä tilassa kerrotaan päällimmäisen ja taustavärin käänteisarvot. Tuloksena olevana värinä käytetään aina vaaleampaa väriä.
`overlay`	Päällekkäin asettelu. Tässä tilassa värit kerrotaan tai vaalennetaan päällimmäisen värin mukaan. Kuviot tai värit peittävät olemassa olevat pikselit, jättäen päällimmäisen värin vaaleat ja tummat alueet ennalleen.

Esimerkki

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

html<div id="elem"></div>

css#elem {
  background-blend-mode: normal;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Esimerkki

Nyt vaihdetaan ominaisuuden background-blend-mode arvo kertolaskuksi:

html<div id="elem"></div>

css#elem {
  background-blend-mode: multiply;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Esimerkki

Asetetaan kuvallemme valotuksen poisto -tila:

html<div id="elem"></div>

css#elem {
  background-blend-mode: screen;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Katso myös

ominaisuus background,
joka on tausta-ominaisuuksien lyhennysmerkintä
ominaisuus background-image,
jolla elementille voidaan asettaa taustakuva
ominaisuus mix-blend-mode,
jolla voidaan sekoittaa elementin värejä taustan kanssa
ominaisuus backdrop-filter,
jolla voidaan soveltaa suodattimia