在具有透明背景的堆叠 div 后面隐藏溢出

Question

我的布局包含一个带有按钮的fixed div (#navigation)。布局还包括可滚动内容 (.card)。

#navigation 目前有一个绿色背景用于演示目的。像这样：

#navigation {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translate(-50%, 0%);
  background: green;
  padding: 25px;
}

<div id="navigation"><button id="btn1">Button</button>
  <button id="btn2">Button</button>
  <button id="btn3">Button</button>
  <button id="btn4">Button</button>
</div>

我想隐藏任何.card 元素的任何部分，只要它位于绿色背景后面。所以，我使用 z-index 堆叠顺序并且效果很好。像这样：

#card-wrapper {
  width: 250px;
  margin: 100px auto;
}

.card {
  height: 200px;
  width: 200px;
  background: #131418;
  margin: 1em auto;
  display: inline-block
}

#navigation {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 1;
  background: green;
  padding: 25px;
}

#main {
  text-align: center;
}

<div id="main">

  <div id="navigation"><button id="btn1">Button</button>
    <button id="btn2">Button</button>
    <button id="btn3">Button</button>
    <button id="btn4">Button</button>
  </div>

  <div id="card-wrapper">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>

</div>

但是，我也不想在生产中使用绿色背景。这意味着#navigation 不应该有背景，只有里面的按钮应该是可见的。

所以我的问题是，如何在 #card-wrapper 到达假设的绿色背景后立即隐藏顶部溢出？

#card-wrapper {
  width: 250px;
  margin: 100px auto;
}

.card {
  height: 200px;
  width: 200px;
  background: #131418;
  margin: 1em auto;
  display: inline-block
}

#navigation {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 1;
  padding: 25px;
  border: 1px solid;
  background: transparent
}

#main {
  text-align: center;
}

body {
  margin: 0 auto;
  background: linear-gradient(to left, #c33764, #1d2671);
}

<div id="main">

  <div id="navigation"><button id="btn1">Button</button>
    <button id="btn2">Button</button>
    <button id="btn3">Button</button>
    <button id="btn4">Button</button>
  </div>

  <div id="card-wrapper">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>

</div>

我对所有 CSS/JS/jQuery 解决方案持开放态度，只要它们不涉及硬编码值

Answer 1

当background 设置为transparent 时，你不能纯CSS 来做。一种解决方法是将其设置为与body 元素 相同的background，并将其width 设置为100% 以匹配width 的body 元素：

/* mandatory to match both backgrounds */
* {margin: 0; padding: 0; box-sizing: border-box}

#card-wrapper {
  width: 250px;
  margin: 100px auto;
}

.card {
  height: 200px;
  width: 200px;
  background: #131418;
  margin: 1em auto;
  display: inline-block
}

#navigation {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 1;
  padding: 25px;
  /*border: 1px solid;*/
  background: linear-gradient(to left, #c33764, #1d2671); /* modified */
  width: 100%; /* added */
}

#main {
  text-align: center;
}

body {
  margin: 0 auto;
  background: linear-gradient(to left, #c33764, #1d2671);
}

<div id="main">
  <div id="navigation">
    <button id="btn1">Button</button>
    <button id="btn2">Button</button>
    <button id="btn3">Button</button>
    <button id="btn4">Button</button>
  </div>
  <div id="card-wrapper">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>