文档博客案例Plus
  1. 效果
  2. mask-image

效果

mask-image

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

类样式
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">Speed</p>
    <p class="mt-2 text-base text-gray-700 dark:text-gray-300">Built for power users</p>
    <p class="mt-1 text-sm leading-relaxed text-balance text-gray-500">
      Work faster than ever with customizable keyboard shortcuts
    </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%

剩余 2 GB 空间中的 0.48 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">Storage used: 75%</p>
    <p class="mt-1 text-gray-500 dark:text-gray-400"><span class="font-medium">0.48 GB</span> out of 2 GB remaining</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>

使用自定义值

使用类似以下的工具类 mask-linear-[<value>] 和 mask-radial-[<value>]来设置蒙版图像基于完全自定义的值

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

对于 CSS 变量，您还可以使用 mask-linear-(<custom-property>) 语法

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

这只是以下语法的简写 mask-linear-[var(<custom-property>)] 它会自动为您添加 var() 函数。

响应式设计

添加前缀一个 mask-image 工具类 使用断点变体（如 md:）以仅在中等 屏幕尺寸及以上时应用该工具类

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

在变体文档中了解更多关于使用变体的信息。

自定义您的主题

使用 --color-* 主题变量来自定义color 项目中的工具类

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

现在，像以下的工具类 mask-radial-from-regal-blue,mask-conic-to-regal-blue,和 mask-b-from-regal-blue可以在您的标记中使用

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

在以下文档中了解更多关于自定义主题的信息 主题文档.

在本页

版权所有 © 2025 Tailwind Labs Inc.·商标政策