Маска-режим - CSS-хитрощі

mask-modeВластивість CSS , вказує чи обробляється маска шару 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: видаляє поточний режим маски з елемента.

Використання кількох значень

Ця властивість може приймати розділений комами список значень для режимів маски, і кожне значення застосовується до відповідного зображення шару маски, зазначеного у властивості маски-зображення.

У наступному прикладі перше значення вказує режим маски, що відповідає першому зображенню, друге значення для другого зображення тощо.

.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 року.

Знизу - зображення маски з білим сонцем у центрі та прозорими областями навколо нього. Як бачите, області while повністю видно:

Використання зображення PNG із альфа-каналом та білими ділянками як зображення маски

А в наступному прикладі як зображення маски використовується барвистий градієнт, і ви можете побачити вплив різних кольорів на значення маски в режимі яскравості: