本文介绍一种利用伪元素（::after）配合 clip-path 和背景图复刻技术，让嵌套的子容器呈现“视觉镂空”效果的方法，使底层背景（甚至其他元素）透过子容器可见，适用于创建动态窗口、蒙版或视差交互场景。
本文介绍一种利用伪元素（::after）配合 `clip-path` 和背景图复刻技术，让嵌套的子容器呈现“视觉镂空”效果的方法，使底层背景（甚至其他元素）透过子容器可见，适用于创建动态窗口、蒙版或视差交互场景。
在 Web 开发中，有时需要实现类似“玻璃窗”或“挖孔”的视觉效果：某个容器（如 .box2）本身不透明、有边框，但其内容区域需透出父容器甚至更外层（如 .App）的背景图像——而不能依赖 z-index 调整层叠顺序（例如因布局限制或动画冲突）。此时，直接设置 opacity: 0 或 background: transparent 并不够用，因为 .box2 仍会遮挡其下方内容。
核心思路是：不真正“穿透”DOM 层叠，而是视觉模拟穿透效果。具体做法是：
- 复刻背景：为 .box2 添加 ::after 伪元素，将其 background-image、background-size、background-position 等样式完全同步至 .App 的背景配置；
- 精确定位与裁剪：伪元素设为 position: absolute，宽高 100%，并通过 z-index: -1 确保位于 .box2 内容之下；同时对 .box2 应用 clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)（等效于无裁剪，但为后续扩展留接口），确保伪元素仅在其边界内可见；
- 保持容器结构完整：.box2 本身保留边框、尺寸和动画能力，不影响交互与布局流。
以下是可直接运行的完整示例代码：
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
position: relative;
}
.App {
width: 100vw;
height: 100vh;
background-image: url(https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.box1 {
width: 500px;
height: 500px;
margin: 50px;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: aqua;
overflow: hidden; /* 防止伪元素溢出 */
}
.box2 {
width: 200px;
height: 200px;
border: 2px solid blue;
position: relative; /* 使 ::after 相对于 box2 定位 */
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
animation: move 4s infinite ease-in-out;
}
.box2::after {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: -1;
background-image: url(https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@keyframes move {
0%, 100% { transform: translate(-100px, -100px); }
50% { transform: translate(100px, 100px); }
}
</style><div class="App">
<div class="box1">
<div class="box2"></div>
</div>
</div>
✅ 关键注意事项：
- 伪元素的背景必须与 .App 完全一致（URL、尺寸、定位），否则会出现错位感；
- .box2 必须设置 position: relative，否则 ::after 的 absolute 定位将相对于最近定位祖先（可能是 .box1 或 body），导致偏移；
- 若 .App 背景是渐变色或纯色，可直接复用 background 值；若含多层背景或复杂混合模式，需按需调整；
- 此方案兼容现代浏览器（Chrome/Firefox/Safari ≥ v15.4），IE 不支持 clip-path 和 ::after 定位叠加，需降级处理；
- 如需“看到其他非背景元素”（如 .App 中 .box1 同级的
），需确保这些元素在 .App 内且 z-index 高于 .box1，再通过相同伪元素策略复刻其视觉状态（进阶技巧）。
该方法规避了 z-index 层叠管理的复杂性，以声明式 CSS 实现高性能“视觉镂空”，是构建沉浸式 UI 的实用技巧。
