Mix-blend-mode - CSS-triki | Almanah CSS 2025

Kazalo:

mix-blend-modeLastnost določa, kako je treba vsebnost elementa je mešanica z ozadjem. Na primer, besedilo a

se lahko na zanimiv način zlije z ozadjem.

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

V zgornjem primeru je vsebina spremenjena mix-blend-modetako, da so barve besedila izključene iz ozadja. To je le ena od mnogih vrednosti za to lastnost.

Obstaja težava s Chromom 58+, ki mix-blend-modese ne bo upodobil na elementih, ki so nastavljeni na prosojnico . The je v Chromu izdan kot številka 711955, ki je dodeljena v času pisanja tega dokumenta. Medtem je preprost popravek elementu telesa dodeliti belo (ali v resnici katero koli) barvo ozadja.

Vrednote

initial: privzeta nastavitev lastnosti, ki ne nastavi načina mešanja.
inherit: element bo podedoval način mešanja od svojega nadrejenega elementa.
unset: odstrani trenutni način mešanja iz elementa.
: to je atribut enega od načinov mešanja spodaj:
normal: ta atribut ne uporablja nobenega mešanja.
multiply: element se pomnoži z ozadjem in nadomesti barvo ozadja. Nastala barva je vedno tako temna kot ozadje.
screen: pomnoži ozadje in vsebina nato dopolni rezultat. Rezultat tega bo vsebina, ki je svetlejša od background-color.
prekrivanje: množi ali prikaže vsebino, odvisno od barve ozadja. To je obratno od načina mešanja trde svetlobe.
potemni: ozadje se nadomesti z vsebino, kjer je vsebina temnejša, sicer ostane, kot je bila.
lighten: ozadje se nadomesti z vsebino, kjer je vsebina svetlejša.
color-dodge: ta atribut osvetli barvo ozadja, da odraža barvo vsebine.
color-burn: to zatemni ozadje, da odraža naravno barvo vsebine.
hard-light: glede na barvo vsebine bo ta atribut prikazal ali pomnožil.
soft-light: odvisno od barve vsebine bo to potemnilo ali posvetlilo.
difference: s tem od svetlejše barve odštejemo temnejšo barvo.
exclusion: podobno, differencevendar z nižjim kontrastom.
hue: ustvari barvo z odtenkom vsebine v kombinaciji z nasičenostjo in svetilnostjo ozadja.
saturation: ustvari barvo z nasičenostjo vsebine v kombinaciji z odtenkom in svetilnostjo ozadja.
color: ustvari barvo z odtenkom in nasičenostjo vsebine ter svetilnostjo ozadja.
luminosity: ustvari barvo s svetilnostjo vsebine ter odtenkom in nasičenostjo ozadja. To je obratno od coloratributa.

Omeniti velja, da nastavitev načina mešanja, ki ne normalbo ustvaril novega konteksta zlaganja, ki ga je treba nato zmešati s kontekstom zlaganja, ki vsebuje element.

Učinek teh vrednosti je prikazan v spodnji predstavitvi:

Več informacij

Osnove načinov mešanja CSS
mix-blend-mode na MDN
mix-blend-mode na W3C
Zbirka predstavitev načina mešanja CSS
Spoznavanje načinov mešanja CSS

Podpora za brskalnik

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.