Režim miešania pozadia - Triky CSS

K background-blend-modevlastníctva definuje, ako nejaký prvok sa background-imagemala splynúť s background-color:

.container ( background-image: url('image.jpg.webp'); background-color: red; background-blend-mode: screen; )

Prezrite si režim miešania pozadia Pen od CSS-Tricks (@ css-tricks) na CodePen.

V ukážke vyššie background-imagenemá predvolené nastavenie vľavo nastavený žiadny režim prelínania, takže obrázok prekrýva background-color. Vpravo však režim miešania upravil background-imagečervenú farbu background-colorpod. Upozorňujeme však, že táto ďalšia vlastnosť neovplyvnila farbu textu.

Hodnoty

initial: predvolená hodnota bez miešania.
inherit: dedí režim prelínania nadradeného prvku.
: hodnota, ktorá zmení obrázok na pozadí v závislosti od farby pozadia.

Hodnota môže byť nastavená ako niektorý z nasledujúcich (v nižšie uvedených demonštrácií background-colorje červený):

`luminosity`: svetlosť vrchnej farby sa zachová pri použití sýtosti a odtieňa farby pozadia.

Ukážka

Tu je príklad, ako sa tieto hodnoty interpretujú v závislosti od background-color:

Prezrite si režim prelínania pozadia pera od CSS-Tricks (@ css-tricks) na CodePen.

Reťazenie viacerých režimov miešania

Každá vrstva pozadia môže mať iba jeden režim prelínania, ale ak napríklad používame viac lineárnych prechodov, každá z nich môže mať vlastný režim prelínania, ktorý umožňuje zaujímavé zobrazenie:

Prezrite si Prechody pera a režim prelínania pozadia od CSS-Tricks (@ css-tricks) na CodePen.

To sa dosiahne uvedením týchto hodnôt v poradí podľa vrstvy pozadia, ktorú chcete vykonať:

.container ( background: linear-gradient(purple 0%, red 90%), linear-gradient(to right, purple 0%, yellow 90%), url('image.jpg.webp') 30px, url('image.jpg.webp') 20px; background-blend-mode: screen, difference, lighten; )

Prvý lineárny gradient má screenrežim prelínania, za ktorým nasleduje druhý lineárny gradient, ktorý má, differencea prvý obrázok pozadia, ktorý sa lightenna neho použil.