文档博客展示柜Plus
  1. 效果
  2. 遮罩图像

效果

mask-image

用于控制元素遮罩图像的工具类。

ClassStyles
mask-[<value>]
mask-image: <value>;
mask-(<custom-property>)
mask-image: var(<custom-property>);
mask-none
mask-image: none;
mask-linear-<number>
mask-image: linear-gradient(<number>deg, black var(--tw-mask-linear-from)), transparent var(--tw-mask-linear-to));
-mask-linear-<number>
mask-image: linear-gradient(calc(<number>deg * -1), black var(--tw-mask-linear-from)), transparent var(--tw-mask-linear-to));
mask-linear-from-<number>
mask-image: linear-gradient(var(--tw-mask-linear-position), black calc(var(--spacing * <number>)), transparent var(--tw-mask-linear-to));
mask-linear-from-<percentage>
mask-image: linear-gradient(var(--tw-mask-linear-position), black <percentage>, transparent var(--tw-mask-linear-to));
mask-linear-from-<color>
mask-image: linear-gradient(var(--tw-mask-linear-position), <color> var(--tw-mask-linear-from), transparent var(--tw-mask-linear-to));
mask-linear-from-(<custom-property>)
mask-image: linear-gradient(var(--tw-mask-linear-position), black <custom-property>, transparent var(--tw-mask-linear-to));
mask-linear-from-[<value>]
mask-image: linear-gradient(var(--tw-mask-linear-position), black <value>, transparent var(--tw-mask-linear-to));

示例

使用图像遮罩

使用 mask-[<value>] 语法设置元素的遮罩图像：

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

遮罩边缘

使用像 mask-b-from-<value> 和 mask-t-to-<value> 这样的工具类，为元素的单侧添加线性渐变遮罩：

mask-t-from-50%

mask-r-from-30%

mask-l-from-50% mask-l-to-90%

mask-b-from-20% mask-b-to-80%

<div class="mask-t-from-50% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-r-from-30% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-l-from-50% mask-l-to-90% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-b-from-20% mask-b-to-80% bg-[url(/img/mountains.jpg)] ..."></div>

此外，使用像 mask-x-from-70% 和 mask-y-to-90% 这样的工具类，可以同时对元素的两个侧面应用遮罩：

mask-x-from-70% mask-x-to-90%

mask-y-from-70% mask-y-to-90%

<div class="mask-x-from-70% mask-x-to-90% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-y-from-70% mask-y-to-90% bg-[url(/img/mountains.jpg)] ..."></div>

默认情况下，线性渐变遮罩从黑色过渡到透明，但你可以使用 mask-<side>-from-<color> 和 mask-<side>-to-<color> 工具类自定义渐变颜色。

添加斜线性遮罩

使用像 mask-linear-<angle>、mask-linear-from-20 和 mask-linear-to-40 这样的工具类，为元素添加自定义线性渐变遮罩：

mask-linear-50

-mask-linear-50

<div class="mask-linear-50 mask-linear-from-60% mask-linear-to-80% bg-[url(/img/mountains.jpg)] ..."></div><div class="-mask-linear-50 mask-linear-from-60% mask-linear-to-80% bg-[url(/img/mountains.jpg)] ..."></div>

添加径向遮罩

使用 mask-radial-from-<value> 和 mask-radial-to-<value> 工具类，为元素添加径向渐变遮罩：

速度

为强大用户而设计

通过我们的键盘快捷键，比以往更快地工作

<div class="flex items-center gap-4">  <img class="mask-radial-[100%_100%] mask-radial-from-75% mask-radial-at-left ..." src="/img/keyboard.png" />  <div class="font-medium">    <p class="font-mono text-xs text-blue-500 uppercase dark:text-blue-400">速度</p>    <p class="mt-2 text-base text-gray-700 dark:text-gray-300">为强大用户而设计</p>    <p class="mt-1 text-sm leading-relaxed text-balance text-gray-500">      通过可自定义的快捷键，比以往更快地工作    </p>  </div></div>

默认情况下，径向渐变遮罩从黑色过渡到透明，但你可以使用 mask-radial-from-<color> 和 mask-radial-to-<color> 工具类自定义渐变颜色。

设置径向位置

使用像 mask-radial-at-bottom-left 和 mask-radial-at-[35%_35%] 这样的工具类，设置径向渐变遮罩的中心位置：

mask-radial-at-top-left

mask-radial-at-top

mask-radial-at-top-right

mask-radial-at-left

mask-radial-at-center

mask-radial-at-right

mask-radial-at-bottom-left

mask-radial-at-bottom

mask-radial-at-bottom-right

<div class="mask-radial-at-top-left mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-radial-at-top mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-radial-at-top-right mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-radial-at-left mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-radial-at-center mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-radial-at-right mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-radial-at-bottom-left mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-radial-at-bottom mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-radial-at-bottom-right mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>

这与 mask-position 不同，后者设置的是遮罩图像本身的位置，而非径向渐变。

设置径向大小

使用像 mask-radial-closest-corner 和 mask-radial-farthest-side 这样的工具类设置径向渐变遮罩的大小：

mask-radial-closest-side

mask-radial-closest-corner

mask-radial-farthest-side

mask-radial-farthest-corner

<div class="mask-radial-closest-side mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-radial-closest-corner mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-radial-farthest-side mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-radial-farthest-corner mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ..."></div>

设置自定义的径向渐变大小时，可以使用的单位取决于渐变的 <ending-shape>，默认设置为 ellipse。

使用 mask-circle 时，只能使用单个固定长度，例如 mask-radial-[5rem]。而使用 mask-ellipse，则可以为每个轴指定固定长度或百分比，例如 mask-radial-[40%_80%]。

添加锥形遮罩

使用 mask-conic-from-<value>、mask-conic-to-<value> 和 mask-conic-<angle> 工具类，为元素添加锥形渐变遮罩：

已用存储：75%

0.48 GB 剩余 2 GB

<div class="flex items-center gap-5 rounded-xl bg-white p-4 shadow-lg ring-1 ring-black/5 dark:bg-gray-800">  <div class="grid grid-cols-1 grid-rows-1">    <div class="border-4 border-gray-100 dark:border-gray-700 ..."></div>    <div class="border-4 border-amber-500 mask-conic-from-75% mask-conic-to-75% dark:border-amber-400 ..."></div>  </div>  <div class="w-0 flex-1 text-sm text-gray-950 dark:text-white">    <p class="font-medium">已用存储：75%</p>    <p class="mt-1 text-gray-500 dark:text-gray-400"><span class="font-medium">0.48 GB</span> 剩余 2 GB</p>  </div></div>

默认情况下，锥形渐变遮罩从黑色过渡到透明，但你可以使用 mask-conic-from-<color> 和 mask-conic-to-<color> 工具类自定义渐变颜色。

组合遮罩

渐变遮罩工具类，如 mask-radial-from-<value>、mask-conic-to-<value> 和 mask-l-from-<value> 可以组合使用，以创建更复杂的渐变遮罩：

<div class="mask-b-from-50% mask-radial-[50%_90%] mask-radial-from-80% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-r-from-80% mask-b-from-80% mask-radial-from-70% mask-radial-to-85% bg-[url(/img/mountains.jpg)] ..."></div>

这种行为依赖于 Tailwind 默认将 mask-composite 属性 设置为 intersect。更改此属性将影响渐变遮罩的组合方式。

移除遮罩图像

使用 mask-none 工具类从元素中移除现有的遮罩图像：

<div class="mask-none">  <!-- ... --></div>

使用自定义值

Use utilities like mask-linear-[<value>] and mask-radial-[<value>] to set the 遮罩图像 based on a completely custom value:

<div class="mask-linear-[70deg,transparent_10%,black,transparent_80%] ...">  <!-- ... --></div>

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

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

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

响应式设计

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

<div class="mask-radial-from-70% md:mask-radial-from-50% ...">  <!-- ... --></div>

Learn more about using variants in the variants documentation.

自定义主题

Use the --color-* theme variables to customize the color utilities in your project:

@theme {  --color-regal-blue: #243c5a; }

Now utilities like mask-radial-from-regal-blue,mask-conic-to-regal-blue, and mask-b-from-regal-blue can be used in your markup:

<div class="mask-radial-from-regal-blue">  <!-- ... --></div>

Learn more about customizing your theme in the theme documentation.

目录

简中文档 - 沪ICP备2024070610号-3