用途
当两个相邻的全宽区块（stacked 或 adjacent full-bleed sections）各自使用同一张纹理、图片或渐变作为背景，并且都设置 background-size: cover 时，交界处仍会出现一条硬接缝。原因是每个区块盒子的宽高比不同，cover 在每个区块中对图片的裁切方式不同，纹理无法对齐，接缝就会读成一条线。本技能解决的就是消除这条可见接缝。
核心原理
不要让两个 cover 裁切边缘直接相接。做法是：把下方区块的背景绘制在一个绝对定位的图层上，让它向上重叠进入上一区块，并用 alpha 遮罩渐隐，使下方纹理以跨淡（crossfade）方式覆盖上方区块，而不是在边缘处碰头。
何时使用
- 相邻区块共享纹理、照片或渐变背景，且边界处能看到接缝。
- 希望某个背景消融进下一区块。
何时不使用
- 背景是纯平色——直接设置相同颜色即可，不存在接缝。
- 希望区块之间有明确的分隔线。
- 两个区块背后可以用同一个背景——更简单的做法是在共享父包裹层上放一个背景。
核心模式
/* BEFORE — 两个 cover 裁切边缘相接 → 硬接缝 */
.section-a { background: url(texture.png) center / cover; }
.section-b { background: url(texture.png) center / cover; }
/* AFTER — 区块 B 的背景跨淡覆盖区块 A */
.section-b { position: relative; } /* 作为 ::before 的锚点 */
.section-b__inner { position: relative; z-index: 2; } /* 内容位于图层之上 */
.section-b::before {
content: "";
position: absolute;
inset: -64px 0 0 0; /* top: -64px 向上延伸进区块 A */
z-index: 0; /* 位于内容之后 */
pointer-events: none; /* 不吞掉区块 A 中的点击 */
background: url(texture.png) top center / cover;
/* 在重叠范围内由透明渐变为不透明，恰好在 B 的真实顶部结束 */
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 64px);
mask-image: linear-gradient(to bottom, transparent 0, #000 64px);
}
重叠距离（top: -64px）与遮罩的渐隐距离（64px）取相同数值，这样渐隐恰好结束在区块 B 的真实顶部边缘。
快速参考
| 关注点 | 做法 |
|---|---|
| 锚定图层 | 在区块上设置 position: relative |
| 保持内容可见 | 内容包裹层 position: relative; z-index: 2（高于图层的 z-index: 0） |
| 向上重叠 | 在 ::before 上设置 top: -Npx（负值） |
| 跨淡 | mask-image: linear-gradient(to bottom, transparent 0, #000 Npx) |
| Safari 支持 | 同时包含 -webkit-mask-image |
| 不阻挡点击 | 图层上设置 pointer-events: none |
| 让纹理对齐 | ::before 图层使用与上方区块相同的 background-position/sizing（top center / cover） |
常见错误
- 区块上没有 position: relative → ::before 会锚定到视口或某个更远的祖先，而不是该区块。
- 内容被图层遮住 → 给内容包裹层比图层更高的 z-index。
- 只写 mask-image 而没有 -webkit-mask-image → Safari 中渐隐失效。
- 重叠距离与渐隐距离不相等 → 渐隐结束得过早或过晚，留下一条淡淡的残线。
- 把遮罩加在区块本身而非图层上 → 连内容也一起被遮罩，而不只是背景。
备注
- 适用于任何绘制方式，不限于纹理 PNG：照片和渐变存在同样的 cover 裁切不匹配，融合方式相同。
- 对于动态背景（CMS/主题设置），把静态定位保留在样式表中，仅以内联方式注入填充（background-color/background-image），让融合机制集中在一处。
- 增大重叠/渐隐距离可获得更柔和、更长的跨淡；减小则获得更紧凑的融合。