mask-mode

Примеры

Базовый пример

Используйте утилиты mask-alpha, mask-luminance и mask-match для управления режимом маски элемента:

<div class="mask-alpha mask-r-from-black mask-r-from-50% mask-r-to-transparent bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-luminance mask-r-from-white mask-r-from-50% mask-r-to-black bg-[url(/img/mountains.jpg)] ..."></div>

При использовании mask-luminance значение яркости маски определяет видимость, поэтому использование оттенков серого даст наиболее предсказуемые результаты. С mask-alpha прозрачность маски определяет видимость замаскированного элемента.

Адаптивный дизайн

Префикс a mask-mode утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<div class="mask-alpha md:mask-luminance ...">  <!-- ... --></div>

Подробнее об использовании вариантов читайте в документации по вариантам.