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

Question

我正在尝试将CS​​S剪辑应用于元素，以允许后面的图层显示出来。我有以下布局。

body, html {
  margin:0;
  padding:0;
}

.container {
background:lightgray;
}

.clip {
  position:fixed;
  height:100%;
  width:100px;
  clip: rect(10px, 100px, 100px, 100px);
}

.section1, .section2 {
  height:100vh;
  width:100%;
}

.section_left_red {
  height:100%;
  width:100px;
  background:red;
}

.section_left_blue {
  height:100%;
  width:100px;
  background:blue;
}

<div class="container">

<div class="clip">
</div>

<div class="section1">
<div class="section_left_red">
</div>
<div>

<div class="section2">
<div class="section_left_blue">
</div>
<div>

</div>

我正在努力实现这样的目标。

所以当我向下滚动时，蓝色背景就会显示出来。谁能告诉我我做错了什么？

Answer 1

您可能可以使用多个背景来创建它。想法是仅对背景的一部分进行着色，使其余部分透明：

body,
html {
  margin: 0;
  padding: 0;
}

.clip {
  position: fixed;
  height: 100%;
  width: 200px;
  box-sizing:border-box;
  border:5px solid lightgray;
  background: 
    linear-gradient(lightgray,lightgray) right/50% 100%,
    linear-gradient(lightgray,lightgray) bottom/100% 80%;
  background-repeat:no-repeat;
}

.section1,
.section2 {
  height: 100vh;
  width: 100%;
  background: red;
}

.section2 {
  background: blue;
}

<div class="container">

  <div class="clip">
  </div>

  <div class="section1">
  </div>

  <div class="section2">
  </div>

</div>

Answer 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;
}