html - CSS Clip - 允许背景显示

Question

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

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>