Mix-blend-mód - CSS-trükkök

A mix-blend-modetulajdonság meghatározza, hogy az elem tartalma hogyan keveredjen a hátteréhez. Például a

érdekes módon keveredhetne a mögötte lévő háttérrel.

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

A fenti példában a tartalmat úgy módosította mix-blend-mode, hogy a szöveg színei kizárásra kerüljenek a hátteréből. Ez csak egy a sok érték közül ennek a tulajdonságnak.

Probléma van a Chrome 58+ alkalmazással, mix-blend-modeamely nem jelenik meg az átlátszóra beállított elemeken . A jegyet 711955. számként jegyezték be a Chrome-ban, amelyet az írás idejéhez rendeltek. Időközben egyszerű javítás egy fehér (vagy valójában bármely) háttérszín hozzárendelése a test elemhez.

Értékek

initial: annak a tulajdonságnak az alapértelmezett beállítása, amely nem állít be keverési módot.
inherit: egy elem örökölni fogja a keverési módot a szülő elemétől.
unset: eltávolítja az aktuális keverési módot egy elemről.
: ez az alábbi keverési módok attribútuma:
normal: ez az attribútum semmilyen keverést nem alkalmaz.
multiply: az elem megszorozódik a háttérrel, és felváltja a háttér színét. Az így kapott szín mindig olyan sötét, mint a háttér.
screen: megsokszorozza a hátteret, a tartalom pedig kiegészíti az eredményt. Ez olyan tartalmat eredményez, amely világosabb, mint a background-color.
overlay: a háttér színétől függően megsokszorozza vagy megjeleníti a tartalmat. Ez a kemény fény keverési mód fordítottja.
sötétebb: a háttér helyettesítve van azzal a tartalommal, ahol sötétebb a tartalom, ellenkező esetben úgy marad, ahogy volt.
lighten: a háttér helyébe a tartalom lép, ahol a tartalom világosabb.
color-dodge: ez az attribútum világosítja a háttér színét, hogy tükrözze a tartalom színét.
color-burn: ez sötétíti a hátteret, hogy tükrözze a tartalom természetes színét.
hard-light: a tartalom színétől függően ez az attribútum megjeleníti vagy megszorozza.
soft-light: a tartalom színétől függően ez sötétebbé vagy világosabbá válik.
difference: ez a két szín közül a sötétebbet vonja le a világosabb színről.
exclusion: hasonló, differencede alacsonyabb kontrasztú.
hue: színt hoz létre a tartalom árnyalatával kombinálva a háttér telítettségével és fényességével.
saturation: színt hoz létre a tartalom telítettségével, a háttér színárnyalatával és fényességével kombinálva.
color: színt hoz létre a tartalom árnyalatával, telítettségével és a háttér fényességével.
luminosity: színt hoz létre a tartalom fényerejével, valamint a háttér színárnyalatával és telítettségével. Ez az colorattribútum inverze .

Érdemes megjegyezni, hogy nem egy keverési mód beállítása, hanem normalúj halmozási kontextus generálása jön létre, amelyet ezután össze kell keverni az elemet tartalmazó halmozási kontextussal.

Ezen értékek hatását az alábbi bemutató mutatja:

Több információ

A CSS Blend módok alapjai
mix-blend-mód az MDN-en
mix-blend-mód W3C-n
CSS Blend Mode bemutatók gyűjteménye
A CSS Blend módok megismerése

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.