本文介绍一种不依赖 z-index 的纯 CSS 方案，通过 clip-path + ::after 伪元素模拟“挖孔”效果，使子容器（box2）呈现为视觉上的透明窗口，从而透出父容器外的背景图及潜在重叠元素。
本文介绍一种不依赖 z-index 的纯 css 方案，通过 `clip-path` + `::after` 伪元素模拟“挖孔”效果，使子容器（box2）呈现为视觉上的透明窗口，从而透出父容器外的背景图及潜在重叠元素。
在 Web 开发中，常需实现类似“玻璃窗”或“镂空遮罩”的视觉效果：某个浮动容器（如 .box2）自身不透明，但其内容区域需“消失”，让更深层的背景（如 .App 的全屏背景图）甚至其他 DOM 元素透过显示——这并非简单设置 opacity: 0 或 visibility: hidden 可达成，因为它们会隐藏整个元素，而非仅“挖空”其区域。
核心思路是视觉欺骗：不真正移除 .box2 的遮挡，而是为其创建一个与底层背景完全一致的伪元素（::after），并精确定位、裁剪，使其仅覆盖 .box2 的可视区域，同时将 .box2 自身设为“无内容占位”，形成穿透假象。
✅ 实现步骤详解
确保背景可复用
将 .App 的背景图属性（background-image, background-size, background-position, background-repeat）完整复制到 .box2::after 中，保证视觉无缝衔接。启用裁剪以限定伪元素范围
使用 clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)（等效于 inset(0)）显式约束伪元素仅作用于 .box2 的矩形边界内。虽看似冗余，但能防止动画或定位偏移时背景溢出。层叠控制：伪元素置于底层
设置 .box2::after { position: absolute; z-index: -1; }，确保它严格位于 .box2 内容之下，且不干扰 .box1 的堆叠上下文（避免触发新层叠上下文导致 z-index 失效）。-
关键容器属性补充
- .box1 需添加 overflow: hidden，防止伪元素意外溢出；
- 所有尺寸单位推荐使用 px 或 % 保持一致性；
- 启用 box-sizing: border-box 避免边框影响实际宽高计算。
? 完整可运行示例
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.App {
width: 100vw;
height: 100vh;
background: url(https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1)
center/cover no-repeat;
position: relative;
}
.box1 {
width: 500px;
height: 500px;
margin: 50px;
display: flex;
justify-content: center;
align-items: center;
background-color: aqua;
overflow: hidden; /* 关键：裁剪伪元素溢出 */
}
.box2 {
width: 200px;
height: 200px;
border: 2px solid blue;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
position: relative; /* 为 ::after 提供定位上下文 */
}
.box2::after {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: -1;
background: inherit; /* 或直接复写 background 属性 */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
</style><div class="App">
<div class="box1">
<div class="box2"></div>
</div>
</div>
⚠️ 注意事项与限制
- 动态背景不适用：若 .App 背景为渐变（linear-gradient）或由 JS 动态生成，需手动同步至 ::after，无法自动继承；
- 多层穿透受限：该方案仅能“透出” .App 的背景；若需显示 .App 外部的其他元素（如 body 上浮动按钮），需将这些元素置于 .App 同级并调整其 z-index，再通过相同技巧在 .box2 上叠加对应伪元素；
-
兼容性提示：clip-path 在 Safari 15.4+ 和主流 Chrome/Firefox 中支持良好，IE 全面不支持；如需兼容旧版，可考虑 SVG
替代方案； - 性能考量：频繁动画（如本例中的 margin 变化）建议改用 transform 以启用 GPU 加速，避免重排。
此方法轻量、语义清晰，无需 JavaScript 干预，是实现 CSS “视觉镂空”效果的优雅实践。
