如何实现网页全局pattern仅在指定形状内可见 其余区域为黑色

方案1：CSS fixed背景绑定（适配动画场景，无需同步纹理） #

该方案是满足你需求的最优解，无需额外处理动画同步逻辑：

• 移除body上的全局纹理样式，仅保留纯黑背景：

body {
  margin: 0;
  min-height: 100vh;
  background: #000;
}

• 给所有需要显示纹理的形状元素统一配置完全相同的背景参数，核心添加background-attachment: fixed属性：

.circle {
  /* 原有形状样式：宽高、圆角、定位、动画属性等全部保留 */
  background-image: url("你的纹理资源地址");
  background-size: 200px 200px; /* 和你原来的全局纹理尺寸保持一致 */
  background-repeat: repeat;
  background-attachment: fixed; /* 背景定位相对于视口，和元素位置无关 */
}

此时不管你给形状加任何位移、缩放、形变动画，纹理都会天然保持全局统一的视觉效果，完全不需要做同步动画处理。

方案2：SVG全局蒙版（适配复杂自定义路径场景） #

如果你后续要使用自定义SVG路径作为形状，可以用该方案实现更灵活的效果：

• 在页面底层放置一个全屏SVG容器，z-index低于其他页面内容
• 在SVG的defs内定义全局蒙版，所有需要显示纹理的形状都放在该蒙版节点内，形状填充色设为纯白色
• 在SVG内部绘制一个和视口等大的矩形，用你需要的全局pattern作为填充，给该矩形绑定之前定义的蒙版
• 直接对蒙版内的形状元素做动画即可，显示区域会自动更新，纹理始终保持全局固定不需要额外调整

兼容性提示：CSS方案中background-attachment: fixed在部分移动端浏览器存在兼容问题，如果需要全端适配优先选择SVG蒙版方案。

内容的提问来源于stack exchange，提问作者marielle