Mix-blend-mode - CSS-gudrybės | CSS almanachas 2025

Turinys:

mix-blend-modeNuosavybė apibrėžia kaip elementas turinys turėtų susilieti su jo fone. Pavyzdžiui, a

galėtų įdomiai susilieti su už jo esančiu fonu.

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

Aukščiau pateiktame pavyzdyje turinys buvo pakeistas mix-blend-modetaip, kad teksto spalvos nebūtų įtrauktos į jo foną. Tai tik viena iš daugelio šios nuosavybės vertybių.

Kyla problema su „Chrome 58+“, kur jos mix-blend-modenebus pateikiamos elementuose, kurie nustatyti skaidriame . „Chrome“ buvo pažymėta kaip 711955 leidimas, kuris priskiriamas šio rašymo metu. Tuo tarpu paprastas taisymas yra kūno elementui priskirti baltą (arba iš tikrųjų bet kurią) fono spalvą.

Vertybės

initial: numatytasis ypatybės, kuri nenustato derinimo režimo, nustatymas.
inherit: elementas paveldės mišinio režimą iš savo pirminio elemento.
unset: pašalina dabartinį mišinio režimą iš elemento.
: tai yra vieno iš žemiau pateiktų mišinio režimų atributas:
normal: šis atributas netaikomas.
multiply: elementas padauginamas iš fono ir pakeičia fono spalvą. Gaunama spalva visada yra tamsi kaip fonas.
screen: padaugina foną, o turinys papildo rezultatą. Dėl to turinys bus ryškesnis nei background-color.
perdanga: daugina arba rodo turinį, priklausomai nuo fono spalvos. Tai yra atvirkštinis kietosios šviesos mišinio režimo režimas.
patamsėti: fonas pakeičiamas turiniu, kai turinys yra tamsesnis, kitaip jis paliekamas toks, koks buvo.
lighten: fonas pakeičiamas turiniu, kai turinys yra lengvesnis.
color-dodge: šis atributas paryškina fono spalvą, kad atspindėtų turinio spalvą.
color-burn: tai tamsina foną, kad atspindėtų turinio natūralią spalvą.
hard-light: atsižvelgiant į turinio spalvą, šis atributas jį rodys arba padaugins.
soft-light: atsižvelgiant į turinio spalvą, jis bus tamsesnis arba šviesesnis.
difference: taip atimama tamsesnė iš dviejų spalvų iš šviesiausios spalvos.
exclusion: panašus į, differencebet su mažesniu kontrastu.
hue: sukuria spalvą su turinio atspalviu kartu su fono sodrumu ir ryškumu.
saturation: sukuria spalvą su turinio sodrumu kartu su fono atspalviu ir ryškumu.
color: sukuria spalvą su turinio atspalviu ir sodrumu bei fono ryškumu.
luminosity: sukuria spalvą pagal turinio ryškumą ir fono atspalvį bei sodrumą. Tai yra atvirkštinė coloratributo reikšmė .

Verta paminėti, kad nustatant mišinio režimą normalbus sukurtas naujas kaupimo kontekstas, kuris turi būti sumaišytas su kaupimo kontekstu, kuriame yra elementas.

Šių verčių poveikis parodytas toliau pateiktoje demonstracijoje:

Daugiau informacijos

CSS „Blend“ režimų pagrindai
„mix-blend-mode“ MDN
„mix-blend-mode“ W3C
CSS „Blend Mode“ demonstracinių rinkinių kolekcija
Susipažinimas su CSS „Blend“ režimais

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.