mask-image

示例(Examples)

¥Examples

使用图片蒙版(Using an image mask)

¥Using an image mask

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

¥Use the mask-[<value>] syntax to set the mask image of an element:

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

遮罩边缘(Masking edges)

¥Masking edges

使用 mask-b-from-<value> 和 mask-t-to-<value> 等工具将线性渐变蒙版添加到元素的单侧：

¥Use utilities like mask-b-from-<value> and mask-t-to-<value> to add a linear gradient mask to a single side of an element:

<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% 等工具可以同时将蒙版应用于元素的两侧：

¥Additionally, use utilities like mask-x-from-70% and mask-y-to-90% to apply a mask to two sides of an element at the same time:

<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> 工具自定义渐变颜色。

¥By default, linear gradient masks transition from black to transparent, but you can customize the gradient colors using the mask-<side>-from-<color> and mask-<side>-to-<color> utilities.

添加斜线遮罩(Adding an angled linear mask)

¥Adding an angled linear mask

使用 mask-linear-<angle>、mask-linear-from-20 和 mask-linear-to-40 等工具向元素添加自定义线性渐变蒙版：

¥Use utilities like mask-linear-<angle>, mask-linear-from-20, and mask-linear-to-40 to add a custom linear gradient mask to an element:

<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>

添加径向遮罩(Adding a radial mask)

¥Adding a radial mask

使用 mask-radial-from-<value> 和 mask-radial-to-<value> 工具为元素添加径向渐变蒙版：

¥Use the mask-radial-from-<value> and mask-radial-to-<value> utilities to add a radial gradient mask to an element:

Speed

Built for power users

Work faster than ever with our keyboard shortcuts

<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> 工具自定义渐变颜色。

¥By default, radial gradient masks transition from black to transparent, but you can customize the gradient colors using the mask-radial-from-<color> and mask-radial-to-<color> utilities.

设置径向位置(Setting the radial position)

¥Setting the radial position

使用 mask-radial-at-bottom-left 和 mask-radial-at-[35%_35%] 等工具设置径向渐变蒙版的中心位置：

¥Use utilities like mask-radial-at-bottom-left and mask-radial-at-[35%_35%] to set the position of the center of the radial gradient mask:

<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 不同，后者设置蒙版图片本身的位置，而不是径向渐变。

¥This is different from mask-position which sets the position of the mask image itself, not the radial gradient.

设置径向大小(Setting the radial size)

¥Setting the radial size

使用 mask-radial-closest-corner 和 mask-radial-farthest-side 等工具设置径向渐变蒙版的大小：

¥Use utilities like mask-radial-closest-corner and mask-radial-farthest-side to set the size of the radial gradient mask:

<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。

¥When setting a custom radial gradient size, the units you can use depend on the <ending-shape> of the gradient which is set to ellipse by default.

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

¥With mask-circle, you can only use a single fixed length, like mask-radial-[5rem]. Whereas with mask-ellipse, you can specify each axis as a fixed length or percentage, like mask-radial-[40%_80%].

添加圆锥遮罩(Adding a conic mask)

¥Adding a conic mask

使用 mask-conic-from-<value>、mask-conic-to-<value> 和 mask-conic-<angle> 工具添加圆锥曲线将渐变蒙版应用到元素：

¥Use the mask-conic-from-<value>, mask-conic-to-<value> and mask-conic-<angle> utilities to add a conic gradient mask to an element:

<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> 工具自定义渐变颜色。

¥By default, conic gradient masks transition from black to transparent, but you can customize the gradient colors using the mask-conic-from-<color> and mask-conic-to-<color> utilities.

组合遮罩(Combining masks)

¥Combining masks

渐变蒙版工具（例如 mask-radial-from-<value>、mask-conic-to-<value> 和 mask-l-from-<value>）可以组合使用以创建更复杂的渐变蒙版：

¥Gradient mask utilities, like mask-radial-from-<value>, mask-conic-to-<value>, and mask-l-from-<value> can be combined to create more complex gradient masks:

<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。更改此属性将影响渐变蒙版的组合方式。

¥This behavior relies on the fact that Tailwind sets the mask-composite property to intersect by default. Changing this property will affect how the gradient masks are combined.

移除遮罩图片(Removing mask images)

¥Removing mask images

使用 mask-none 工具移除元素中现有的蒙版图片：

¥Use the mask-none utility to remove an existing mask image from an element:

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

使用自定义值(Using a custom value)

¥Using a custom value

使用工具例如 mask-linear-[<value>] and mask-radial-[<value>] 根据完全自定义的值设置 mask image：

<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() 函数。

响应式设计(Responsive design)

¥Responsive design

在 mask-image 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。

自定义主题(Customizing your theme)

¥Customizing your theme

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

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

现在的工具类如 mask-radial-from-regal-blue,mask-conic-to-regal-blue, and mask-b-from-regal-blue 可以在你的标记中使用：

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

在此详细了解如何自定义主题： 主题文档。