本文介绍一种简洁高效的 css 方案：通过为网格项（grid items）单独设置 `background-image` 并配合 `background-attachment: fixed`，使所有子元素共享同一渐变背景，同时容器间隙和内边距区域自然呈现白色背景，无需多层定位或遮罩。
实现这一效果的关键在于背景的“视觉连续性”控制，而非图层叠加。传统思路常试图用底层容器渲染背景、顶层容器“挖空”子元素来透出背景，但会因 border-radius、margin、padding 等导致边缘断裂或覆盖异常。而 background-attachment: fixed 提供了更优雅的解法：它让每个子元素的背景图像相对于视口固定，因此所有子元素渲染的是同一张“静止”的渐变图——视觉上无缝衔接，仿佛整个网格被一张大图覆盖；而子元素之间的 gap、容器 padding 区域本身无背景（默认透明），在白色
或显式设为 background-color: white 的父容器下，自然呈现纯白。
以下是完整可运行的实现代码：
* { box-sizing: border-box; } body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: white; /* 确保容器外层为白色 */ } .grid { display: grid; grid: auto-flow / repeat(3, 1fr); /* 推荐写法，语义更清晰 */ gap: 15px; /* 使用 gap 替代 margin，更可控 */ padding: 20px; border-radius: 15px; border: 1px solid black; background-color: white; /* 容器背景显式设为白色 */ } .grid > * { width: 100px; height: 100px; border-radius: 10px; border: 1px solid black; /* ✅ 核心：共享且对齐的渐变背景 */ background-image: linear-gradient(90deg, #ffeb3b, #9c27b0); background-attachment: fixed; /* 必须！保证所有 item 渲染同一视口坐标下的背景 */ background-size: cover; background-position: center; background-repeat: no-repeat; } ⚠️ 注意事项与最佳实践：
- background-attachment: fixed 是本方案的基石，缺之则每个子元素独立平铺/拉伸背景，失去“整体感”；
- 避免在 .grid 上设置 background-image，否则会覆盖白色背景；所有背景逻辑应只作用于 >.grid > *；
- 若需响应式适配，建议结合 background-size: cover 与 background-position 微调，而非依赖绝对尺寸；
- gap 属性比在子元素上使用 margin 更可靠（避免外边距合并、圆角切割等问题），且能确保空白区域始终为容器背景色（即白色）；
- 如需兼容旧版 safari（
总结来说，这不是一个“遮罩”问题，而是一个“背景同步”问题。放弃多层 dom 和 z-index 折腾，转而利用 css 背景的视口锚定特性，即可用极简代码达成专业级视觉效果——清晰、可维护、高性能。