mask-size

Примеры

Заполнение контейнера

Используйте утилиту mask-cover для масштабирования изображения маски до тех пор, пока оно не заполнит слой маски, обрезая изображение при необходимости:

<div class="mask-cover mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>

Заполнение без обрезки

Используйте утилиту mask-contain для масштабирования изображения маски до внешних краев без обрезки или растяжения:

<div class="mask-contain mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>

Использование размера по умолчанию

Используйте утилиту mask-auto для отображения изображения маски в его размере по умолчанию:

<div class="mask-auto mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ..."></div>

Использование пользовательского значения

Используйте синтаксис mask-size-[<value>] , чтобы задать mask image size на основе полностью пользовательского значения:

<div class="mask-size-[auto_100px] ...">  <!-- ... --></div>

Для переменных CSS вы также можете использовать синтаксис: mask-size-(<custom-property>)

<div class="mask-size-(--my-mask-size) ...">  <!-- ... --></div>

Это просто сокращение, mask-size-[var(<custom-property>)] которое автоматически добавляет функцию var().

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

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

<div class="mask-auto md:mask-contain ...">  <!-- ... --></div>

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