Html CSS剪辑-允许背景显示通过

我正在尝试将css剪辑应用到一个元素，以允许后面的层显示出来。我的布局如下

body，html{
保证金：0；
填充：0；
}
.集装箱{
背景：浅灰色；
}
.夹子{
位置：固定；
身高：100%；
宽度：100px；
剪辑：rect（10px，100px，100px，100px）；
}
.第1节、.第2节{
高度：100vh；
宽度：100%；
}
.截面图左红色{
身高：100%；
宽度：100px；
背景：红色；
}
.剖面图_左_蓝色{
身高：100%；
宽度：100px；
背景：蓝色；
}

---

您可能可以使用多个背景来创建此功能。想法是只对背景的一部分上色，使其余部分透明：

body，
html{
保证金：0；
填充：0；
}
.夹子{
位置：固定；
身高：100%；
宽度：200px；
框大小：边框框；
边框：5px实心浅灰色；
背景：
线性梯度（浅灰色、浅灰色）右侧/50%100%，
线性梯度（浅灰色、浅灰色）底部/100%80%；
背景重复：无重复；
}
.第1节，
.第2节{
高度：100vh；
宽度：100%；
背景：红色；
}
.第2节{
背景：蓝色；
}

---

我不认为剪辑是实现这一目标所需的技术

Clip css属性意味着切掉绝对定位的图像的一部分。我不认为这是为了其他元素

您是否尝试过使用渐变在内部创建孔而不是剪辑？甚至可能是边界：

.clip {
   position: fixed;
   height: 100vh;
   width: 100vw;
   top: 0;
   left: 0;
   border-top: 10px solid #fff;
   border-left: 10px solid #fff;
   border-right: calc(100vw - 60px) solid #fff;
   border-bottom: calc(100vh - 60px) solid #fff;
   box-sizing: border-box;
}

---

我不明白你的意思，resp。在这个例子中，你实际上想看到的是。我试图在屏幕上覆盖一个固定的遮罩，通过禁用Chrome dev tools中的clip属性，只显示底层div的一部分。在视觉效果方面，完全改变了zeropointzero，因此更不清楚你想通过这个实现什么，或者问题是什么。