css - 为 CSS 固定元素使用站点背景

Question

我有一个固定的 div 通过 position: fixed “悬停”在我网站的其余部分之上。但是，当其他站点元素(即文本)出现在悬停元素后面时，这很丑陋。我想隐藏悬停元素后面的元素，意思是只显示它后面的网站背景。

因为站点背景是渐变的，我不能简单地给 float 元素它自己的背景。有办法做到这一点吗？

body {
  width: 200px;
  font-family: sans-serif;
  background: linear-gradient(to bottom, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
}

#fixed {
  position: fixed;
  top: 0;
  left: 0;
  padding: 20px;
  font-size: 200%;
  z-index: 5;
}

<div id="fixed">
Some Text
</div>

<div id="text">
  <script>
  for(i=0;i<50;i++) {
    document.write("Text text text text<br />")  
  }
  </script>
</div>

编辑:澄清一下:我希望固定元素的背景与固定元素当前结束的站点背景相同。我不想将固定元素置于所有其他内容之上。

Answer 1

我能看到这样做的唯一方法是为文本设置滚动框架并将固定元素(不再需要固定)留在页面顶部

body {
  width: 200px;
  font-family: sans-serif;
  background: linear-gradient(to bottom, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
  overflow: hidden;
}

#fixed {
  position: fixed;
  top: 0;
  left: 0;
  padding: 20px;
  font-size: 200%;
  z-index: 5;
}

#text{
    margin-top: 80px;
    height: 400px;
    overflow: auto;
    width: 400px;
}

<div id="fixed">
Some Text
</div>
<div id="text">
  <script>
  for(i=0;i<50;i++) {
    document.write("Text text text text<br />")  
  }
  </script>
</div>