当一个div在另一个div前面时如何屏蔽它答案

【问题标题】：How to mask a div when it's in front of another div当一个div在另一个div前面时如何屏蔽它
【发布时间】：2019-07-14 00:09:09
【问题描述】：

我希望一个 div 成为另一个移动 div 的背景的固定部分。所以想象网站的上半部分是一个白色的 div。下半部分是一个蓝色的 div，上面漂浮着红色的圆圈。当用户滚动时，蓝色 div 将在白色 div 的顶部向上滚动。红色圆圈的位置=固定，随机定位在页面上。我希望它们只显示在蓝色 div 上，所以白色 div 必须隐藏它们。

我尝试使用 z-indices 执行此操作，但我无法让所有重叠同时工作。基本上，红色圆圈需要同时位于白色 div 的后面和蓝色 div 的前面，但蓝色 div 也必须位于白色 div 的前面。我查看了剪辑，但我只知道如何将红色圆圈剪辑到相对于它们自己的位置。不要剪掉屏幕的某个区域，以便当他们移动到该区域时，它们会被遮住。也不确定当用户滚动时如何让剪辑与白色 div 一起移出页面。

【问题讨论】：

红色圆圈需要同时在白色div的后面和蓝色div的前面，但是蓝色的div也必须在白色div的前面 -- > 在数学上这是不可能的：如果 A > B 和 C A
是的，但我希望有一些 CSS 技巧可以绕过它。例如，基于另一个 div 在元素上应用掩码。只是不确定这是否可能
分享你的代码，可能这比你描述的要容易
也许分享一张图片来解释你的意思
白色 div 的子级应该随之向上滚动。只有红色圆圈是固定的

标签： html css z-index display clip

【解决方案1】：

如果红色圆圈只是简单的红色圆圈，您可以考虑使用background-attachment:fixed 的技巧

.top{
 background:url(https://picsum.photos/id/10/800/600) center/cover;
 height:200px;
}
.bottom{
 /* Random circles*/
 background-image:
  radial-gradient(farthest-side,red 95%,transparent 100%),
  radial-gradient(farthest-side,red 95%,transparent 100%),
  radial-gradient(farthest-side,red 95%,transparent 100%),
  radial-gradient(farthest-side,red 95%,transparent 100%),
  radial-gradient(farthest-side,red 95%,transparent 100%);
 background-position:
  10px 10px,
  10px 150px,
  200px 10px,
  200px 300px,
  300px 80px;
 background-size:40px 40px;
 background-attachment:fixed;
 background-repeat:no-repeat;
 background-color:rgba(0,0,255,0.5);
 height:400px;
 margin-top:-50px; /* To create a small overalp with top*/
}

<div class="top">

</div>
<div class="bottom">

</div>

【讨论】：

它们实际上是具有 50% 边界半径和模糊滤镜的 div。我将它们附加到带有随机设置的 javascript 中，并通过变换为它们的位置、比例和不透明度设置动画。想象透明气泡在屏幕上缓慢移动。我还能用这个技巧吗？

【解决方案2】：

由于蓝色 div 与白色滚动，您可以让蓝色 div 位置是绝对的。在白色 div 下，它仍然会滚动。使用两个位置元素，您可以通过将蓝色 div 的 z-index 设为 -2 并将红色圆圈的 z-index 设为 -1 来使 z-index 工作。

html, body, .container{
  height: 100%;
  width: 100%;
  margin: 0;
}
.top, .bottom{
  height: 100%;
  width: 100%;
  z-index: 0;
}
.top{
  background: white;
  .content{
    margin: 5%;
    color: red;
  }
}
.bg{
  position: absolute;
  height: 100vh;
  width: 100%;
  background: blue;
  z-index: -2;
  .content{
    margin: 5px;
  }
}
.circle{
  position: fixed;
  height: 50px;
  width: 50px;
  background: red;
  border-radius: 50%;
  z-index: -1;
}

.c-1{
  left : 25%;
  top : 25%;
}

.c-2{
  left : 60%;
  top : 40%;
}

.c-3{
  left : 10%;
  top : 78%;
}

<div class="container">
  <div class="top">
    <div class="content">
      <h1>some text</h1>
    </div>
  </div>
  <div class="bottom">
    <div class="circle c-1"></div>
    <div class="circle c-2"></div>
    <div class="circle c-3"></div>
    <div class="bg">
     <div class="content">
       <p> some text </p>
      </div>
    </div>
  </div>
</div>

【讨论】：