Маска-зображення - CSS-хитрощі

A maskв CSS приховує частину елемента, до якого застосовано.

.el ( mask-image: url(star.svg); )

Скажімо, у вас був елемент із фотографічним фоном і чорно-біла SVG-графіка, яку можна використовувати як маску, наприклад:

Ви можете встановити зображення як a, background-imageа маску як a mask-imageдля одного елемента, і отримати щось подібне:

Маски мають багато спільного з фонами, оскільки ви можете їх розмірювати, розміщувати та повторювати, подібні до фонів. Дивіться відповідні властивості нижче. Але ось ще одна цікава річ щодо масок, якими вони діляться з фонами: вони можуть бути градієнтами.

Ось той самий фоновий малюнок, тільки з linear-gradientмаскою, що його покриває, що робить верх прозорим, що в'яне, а низ, який зовсім не прозорий:

Це працює, тому що верхня частина linear-gradientє transparent. Я б припустив, що це спрацювало б, якби це було whiteтак само довго, як mask-typeбуло luminance, але це, здається, не працює в жодному браузері для мене.

Якщо говорити про luminanceмаски, це, схоже, не працює для зображень як масок, які для мене є растровим форматом, таким як JPG.webp або PNG. Оновлення : Reader Майкл Холл пише з демо-версією, де це може бути пов’язано з використанням властивостей long-hand. Здається, Firefox підтримує цю концепцію, якщо ви використовуєте лише скорочення.

Але альфа-маски, здається, чудово працюють. Як і в растровій графіці, яка використовує фактичну альфа-прозорість. Подобається це:

І лише для підтвердження аргументу, кольорову анімацію ви можете побачити через маску:

mask-imageВластивість також може бути використаний безпосередньо всередині елементів SVG. Як перевірити цю еліптичну маску, яка також має розмитий фільтр:

Здається, ви могли б зачепити цю маску SVG і застосувати її до інших елементів за допомогою, mask-image: url(#mask);але я не вважаю, що це насправді працює. Він працює лише в SVG і має неприємний побічний ефект - повністю стирає зображення, якщо використовується поза SVG.

Підтримка браузера

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.