Маск-моде - ЦСС-трикови | ЦСС Алманац 2025

mask-modeЦСС својство означава да ли је ЦСС маска слој слика третира као алфа маска или осветљења маске.

.element ( mask-image: url(sun.svg); mask-mode: alpha; )

Синтакса

mask-mode: alpha | luminance | match-source

Имовина прихвата једну кључну реч вредност, или листу од два одвојених зарезом или сва три alpha, luminanceи mask-sourceвредности.

Почетна вредност: match-source
Односи се на: све елементе. У СВГ-у се односи на елементе контејнера искључујући елементе, све графичке елементе.
Наследио: не
Израчуната вредност: како је наведено
Тип анимације: дискретна

Вредности

/* Keyword values */ mask-mode: alpha; mask-mode: luminance; mask-mode: match-source; /* Global values */ mask-mode: inherit; mask-mode: initial; mask-mode: unset;

alpha: одређује да се вредности алфа (алфа канал) слике слоја маске користе као вредности маске.
luminance: одређује да се вредности осветљености слике маске користе као вредности маске.
match-source: подразумевана вредност, која режим маске поставља на алфа ако је референца маске mask-imageсвојства ЦСС елемент попут УРЛ-а слике или градијента. Међутим, ако је референца на маску mask-imageсвојства СВГ елемент, мора се користити вредност наведена својством типа маске референцираног елемента.
initial: примењује подразумевану поставку својства, која је match-source.
inherit: прихвата вредност начина рада маске родитеља.
unset: уклања тренутни начин маске из елемента.

Коришћење више вредности

Ово својство може узети листу вредности раздвојених зарезом за начине маске и свака вредност се примењује на одговарајућу слику слоја маске наведену у својству слике маске.

У следећем примеру, прва вредност одређује режим маске који одговара првој слици, друга вредност за другу слику итд.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-mode: luminance, alpha, match-source; )

Алфа и маске за осветљеност

Маскирање у ЦСС долази са две методе које имају неке разлике у израчунавању вредности маске.

Алфа маске

Слике су направљене од пиксела, сваки пиксел садржи неке податке који садрже вредности боја и можда алфа вредности са информацијама о прозирности. Слика са алфа каналом може бити алфа маска , попут ПНГ слика са црним и прозирним областима.

У једноставној операцији маскирања, елемент и слика маске постављени су на њега. Алфа вредност сваког пиксела на слици маске спојиће се са одговарајућим пикселом у елементу.

Ако је вредност алфа нула (тј. Провидна), она побеђује и тај део елемента је маскиран (тј. Скривен).
Алфа вредност један (тј. Потпуно непровидна) омогућава да тај пиксел елемента буде видљив.
Вредност између 0 и 1 (нпр. 0,5) омогућава пикселу да буде видљив, али уз одређени ниво транспарентности.

Дакле, у овој методи, вредност маске у датој тачки је једноставно вредност алфа канала у тој тачки слике маске, а канали у боји не доприносе вредности маске.

Испод је пример алфа маске која садржи само црну (алфа вредност 1) и провидне области (алфа вредност 0) и можете видети резултат који има неке делове који су потпуно видљиви, а други потпуно транспарентни:

Коришћење ПНГ-а са алфа каналом као слике маске

Али у следећем примеру користимо градијент који има различит ниво транспарентности. Резултат није само видљив или прозиран, већ постоје нека провидна подручја:

img ( mask-image: linear-gradient(black, transparent); mask-mode: alpha; )

И ево како резултат изгледа у прегледачу:

Коришћење линеарног градијента као слике маске

Маске за осветљеност

У маски осветљености су битне боје и алфа вредности. Када је алфа вредност 0 (тј. Потпуно транспарентна), елемент је скривен; када је алфа вредност 1, вредности маске варирају у зависности од канала боје тог пиксела. На пример, када је боја бела, елемент је видљив; у случају црне површине, елемент је скривен.

Док се израчунавање вредности маске у алфа маски заснива само на алфа вредностима слике маске, вредности маске осветљености маске израчунавају се из вредности осветљености и алфа вредности. Прегледачи то раде у следећим корацима:

Израчунајте вредност осветљености из вредности канала боја.
Помножите израчунату вредност осветљености са одговарајућом алфа вредношћу да бисте добили вредност маске.

/ објашњење За више информација о овим прорачунима можете погледати одељак за обраду маске у спецификацији ЦСС Маскинг Модуле 1 из Нацрта уредника из септембра 2019.

Испод је слика маске са белим сунцем у средини и провидним деловима око ње. Као што видите, док су подручја у потпуности видљива: