视觉纹理内容

Web 功能：遮罩

概览

如需为元素应用逼真的风化或纹理图案（例如斑驳、噪点或纸张纹理），请使用 CSS 遮罩 (mask-image) 和重复的纹理图片。这样，您就可以通过使内容本身的部分区域半透明来使其呈现纹理效果，而不仅仅是在内容上方叠加纹理。这样可以打造更逼真的物理材质外观。

实现

如需应用纹理图案，请执行以下操作：

方法 1：使用重复的光栅图片（推荐用于逼真的纹理）

这是最常见的逼真纹理方法。

.weathered-element {
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: url('grunge-pattern.png');
  -webkit-mask-repeat: repeat; /* Repeat the pattern to fill the area */
  -webkit-mask-size: 300px; /* Control the scale of the texture */

  /* Standard property for modern browsers */
  mask-image: url('grunge-pattern.png');
  mask-repeat: repeat;
  mask-size: 300px;
}

方法 2：使用 CSS 渐变创建几何图案

您可以使用 CSS 渐变生成图案。此格式是独立的，不需要外部图片文件。

.patterned-element {
  --checkerboard-gradient: 
    linear-gradient(45deg, #000 25%, transparent 25%), 
    linear-gradient(-45deg, #000 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #000 75%), 
    linear-gradient(-45deg, transparent 75%, #000 75%);

  /* Apply a checkerboard pattern as a mask */
  -webkit-mask-image: var(--checkerboard-gradient);
  -webkit-mask-size: 20px 20px;
  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  
  mask-image: var(--checkerboard-gradient);
  mask-size: 20px 20px;
  mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

Alpha 蒙版模式与亮度蒙版模式

默认情况下，CSS 遮罩使用 mask-mode: match-source。这意味着，浏览器会根据您提供的来源类型，自动决定是使用遮罩的 Alpha 通道（透明度）还是亮度：

遮罩来源类型	默认遮盖模式	遮盖行为
内嵌 SVG `<mask>` 元素	`luminance`	不透明度由颜色的亮度决定。白色会显示内容，黑色会隐藏内容，灰色会创建半透明效果。
直接图片文件（例如 PNG、SVG 文件）	`alpha`	不透明度由透明度决定。不透明部分会显示内容，透明部分会隐藏内容。
CSS 渐变	`alpha`	不透明度由透明度决定。不透明颜色（如 `black`）会显示内容，而透明颜色会隐藏内容。

后备策略

如果浏览器不支持 mask-image 或带前缀的版本：

该元素将不带纹理显示（干净且纯色填充）。
确保在没有纹理的情况下，内容仍然清晰可辨（渐进增强）。
您可以使用背景图片或叠加层作为后备方案来模拟纹理，但这不会影响内容本身的透明度。

/* Fallback: Use a background image for browsers without mask support */
@supports (not (mask-image: url(x))) and (not (-webkit-mask-image: url(x))) {
  .weathered-element {
    /* Fallback adds texture on top or behind, depending on implementation */
    background-image: url('grunge-pattern.svg');
    background-color: #fff; /* Ensure background is solid if needed */
  }
}