Mix-blend-tila - CSS-temppuja | CSS-almanakka 2025

mix-blend-modeOminaisuus määrittää, kuinka elementin sisältöä tulisi sulautua sen taustalla. Esimerkiksi a

voisi sulautua sen taustaan mielenkiintoisilla tavoilla.

.blend ( mix-blend-mode: exclusion; )

Yllä olevassa esimerkissä sisältöä on muutettu mix-blend-modesiten, että tekstin värit jätetään pois sen taustasta. Tämä on vain yksi tämän ominaisuuden monista arvoista.

Chrome 58+ -sovelluksessa on ongelma, jota mix-blend-modeei voi tehdä läpinäkyvälle asetetuille elementeille . Tämä on merkitty numeroon 711955 Chromessa, joka on määritetty tämän kirjoituksen aikaan. Sillä välin yksinkertainen korjaus on määrittää valkoinen (tai oikeastaan mikä tahansa) taustaväri runkoelementille.

Arvot

initial: sen ominaisuuden oletusasetus, joka ei aseta sekoitustilaa.
inherit: elementti perii sekoitustilan vanhemmalta elementiltä.
unset: poistaa nykyisen sekoitustilan elementistä.
: tämä on yhden alla olevan sekoitustilan ominaisuus:
normal: tämä attribuutti ei sovi mitään sekoittamista.
multiply: elementti kerrotaan taustalla ja korvaa taustavärin. Tuloksena oleva väri on aina yhtä tumma kuin tausta.
screen: moninkertaistaa taustan ja sisältö täydentää tulosta. Tämä johtaa sisältöön, joka on kirkkaampaa kuin background-color.
overlay: kertoo tai näyttää sisällön taustaväristä riippuen. Tämä on käänteinen kovan valon sekoitustilalle.
tummentaa: tausta korvataan sisällöllä, jossa sisältö on tummempaa, muuten se jätetään sellaisenaan.
lighten: tausta korvataan sisällöllä, jossa sisältö on vaaleampi.
color-dodge: tämä ominaisuus kirkastaa taustaväriä vastaamaan sisällön väriä.
color-burn: tämä tummentaa taustaa vastaamaan sisällön luonnollista väriä.
hard-light: sisällön väristä riippuen tämä ominaisuus seuloo tai kertoo sen.
soft-light: Sisällön väristä riippuen tämä tummentaa tai vaalentaa sitä.
difference: tämä vähentää kahden värin tummemman vaaleammasta.
exclusion: samanlainen kuin differencemutta kontrastia pienempi.
hue: luo värin sisällön sävyllä yhdistettynä taustan kylläisyydellä ja kirkkaudella.
saturation: luo värin sisällön kylläisyydellä yhdistettynä taustan sävyyn ja kirkkauteen.
color: luo värin sisällön sävyllä ja kylläisyydellä sekä taustan kirkkaudella.
luminosity: luo värin sisällön kirkkaudella sekä taustan sävyllä ja kylläisyydellä. Tämä on colorattribuutin käänteinen .

On syytä huomata, että muun sekoitustilan asettaminen kuin normalluo uuden pinoamiskontekstin, joka on sitten sekoitettava elementin sisältävään pinoamiskontekstiin.

Näiden arvojen vaikutus on esitetty alla olevassa esittelyssä:

Lisää tietoa

CSS Blend -tilojen perusteet
mix-blend-tila MDN: ssä
mix-blend-tila W3C: ssä
Kokoelma CSS Blend Mode -demoja
CSS-sekoitustilojen tunteminen

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.