mask-type

Примеры

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

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

<svg>  <mask id="blob1" class="mask-type-alpha fill-gray-700/70">    <path d="..."></path>  </mask>  <image href="/img/mountains.jpg" height="100%" width="100%" mask="url(#blob1)" /></svg><svg>  <mask id="blob2" class="mask-type-luminance fill-gray-700/70">    <path d="..."></path>  </mask>  <image href="/img/mountains.jpg" height="100%" width="100%" mask="url(#blob2)" /></svg>

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

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

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

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

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