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>

​

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