mask-size

Ví dụ

Lấp đầy container

Sử dụng tiện ích mask-cover để chia tỷ lệ mask image cho đến khi nó lấp đầy lớp mask, cắt hình ảnh nếu cần:

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

Lấp đầy mà không cắt

Sử dụng tiện ích mask-contain để chia tỷ lệ mask image đến các cạnh ngoài mà không cắt hoặc kéo giãn:

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

Sử dụng kích thước mặc định

Sử dụng tiện ích mask-auto để hiển thị mask image ở kích thước mặc định của nó:

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

Sử dụng giá trị tùy chỉnh

Use the mask-size-[<value>] syntax to set the mask image size based on a completely custom value:

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

For CSS variables, you can also use the mask-size-(<custom-property>) syntax:

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

This is just a shorthand for mask-size-[var(<custom-property>)] that adds the var() function for you automatically.

Responsive design

Prefix a mask-size utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.