Режим на маска - CSS-трикове

В mask-modeCSS собственост показва дали маска слой изображение CSS се третира като алфа маска или маска яркост.

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

Синтаксис

mask-mode: alpha | luminance | match-source

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

Начална стойност: match-source
Прилага се за: всички елементи. В SVG се отнася за елементи на контейнера, с изключение на елемента, всички графични елементи.
Наследен: не
Изчислена стойност: както е посочено
Тип анимация: дискретна

Стойности

/* 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свойството е CSS елемент като URL адрес на изображение или градиент. Ако обаче референцията на маската на mask-imageсвойството е SVG елемент, трябва да се използва стойността, посочена от свойството тип маска на реферирания елемент.
initial: прилага настройката по подразбиране на свойството, която е match-source.
inherit: приема стойността на режима на маска на родителя.
unset: премахва текущия режим на маска от елемента.

Използване на множество стойности

Това свойство може да приема разделен със запетая списък със стойности за режимите на маска и всяка стойност се прилага към съответното изображение на слоя на маска, посочено в свойството mask-image.

В следващия пример първата стойност задава режима на маска, съответстващ на първото изображение, втората стойност за второто изображение и т.н.

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

Маски за алфа и яркост

Маскирането в CSS се предлага с два метода, които имат някои разлики в изчисляването на стойностите на маската.

Алфа маски

Изображенията са направени от пиксели, всеки пиксел има някои данни, съдържащи цветни стойности и може би алфа стойности с информация за прозрачност. Изображение с алфа канал може да бъде алфа маска , като PNG изображения с черни и прозрачни области.

В проста операция за маскиране имаме елемент и изображение на маска, поставени върху него. Алфа стойността на всеки пиксел в изображението на маската ще бъде обединена със съответния пиксел в елемента.

Ако алфа стойността е нула (т.е. прозрачна), тя печели и тази част от елемента е маскирана (т.е. скрита).
Алфа стойността на единица (т.е. напълно непрозрачна) позволява този пиксел на елемента да бъде видим.
Стойност между 0 и 1 (напр. 0,5) позволява на пиксела да бъде видим, но с определено ниво на прозрачност.

Така че при този метод стойността на маската в дадена точка е просто стойността на алфа канала в тази точка на изображението на маската и цветните канали не допринасят за стойността на маската.

Примерът по-долу е алфа маска, която съдържа само черно (алфа стойност 1) и прозрачни области (алфа стойност 0) и можете да видите резултата, при който някои части са напълно видими, а други напълно прозрачни:

Използване на PNG с алфа канал като изображение на маска

Но в следващия пример използваме градиент, който има различно ниво на прозрачност. Резултатът не е само видим или прозрачен, но има някои полупрозрачни области:

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

И ето как изглежда резултатът в браузъра:

Използване на линеен градиент като изображение на маска

Маски за яркост

В маската за яркост цветовете и алфа стойностите имат значение. Когато алфа стойността е 0 (т.е. напълно прозрачна), елементът е скрит; когато има алфа стойност 1, стойностите на маската варират в зависимост от цветовия канал на този пиксел. Например, когато цветът е бял, елементът е видим; в случай на черна област елементът е скрит.

Докато изчисляването на стойностите на маската в алфа маска се основава само на алфа стойностите на изображението на маската, стойностите на маската на яркостната маска се изчисляват от яркостта и алфа стойностите. Браузърите правят това в следните стъпки:

Изчислете стойност на яркостта от стойностите на цветовия канал.
Умножете изчислената стойност на яркостта по съответната алфа стойност, за да се получи стойността на маската.

/ обяснение За повече информация относно тези изчисления можете да разгледате раздела за обработка на маски в спецификацията на CSS Masking Module 1 от Чернова на редактора от септември 2019 г.

Долу е изображение на маска с бяло слънце в центъра и прозрачни области около него. Както можете да видите, докато областите са напълно видими:

Използване на PNG изображение с алфа канал и бели области като изображение на маска

И в следващия пример като изображение на маска се използва цветен градиент и можете да видите ефекта на различни цветове върху стойностите на маската в режим на яркост: