在固定导航栏下滚动时减少内容的不透明度

Question

所以，我试图在一些div（在ou case-footer and navbar）中将内容从不透明转换为透明，并保持其背景透明以避免内容重叠，如以及将页面的一般背景作为背景。

例如 - 这是我们的页面：

目前，当我们滚动时 - 我们有这个;

但我希望它像这样：

请注意：页面背景可以是固定渐变或壁纸，而不是平面颜色，导航/页脚没有背景。

怎么做？

UPD：为了说清楚，这是交易

正如您所见 - 像＆＃34;标题的解决方案具有相同的BGR和标题下方的100到0梯度＆＃34;在这种情况下不会工作，因为标题背景在垂直拉伸时不会与页面背景匹配。这就是为什么我想在页眉/页脚下平滑减少不透明度的原因。 如果它至少可以掩盖页眉和页脚中与页面相同大小的背景渐变 - 我欢迎这一点。如果没有非核心解决方案，也许我最终会抛弃这个想法。

Answer 1

看看我刚才做的......

https://jsfiddle.net/5kmobuf7/2/

#header {
  width: 100%;
  height: 50px;
  background-color: #4b5852;
  color: white;
  box-shadow: 0px 30px 10px #4b5852;
  position: fixed;
  z-index: 3;
}

body {
  background-color: #4b5852;
  margin: 0;
}

#content {
  color: white;
  width: 100%;
  margin-top: 200px;
  text-align: center;
  font-size: 20px;
  position: absolute;
}

Answer 2

我个人建议在标题上使用渐变

这是一个小提示：https://jsfiddle.net/ve806t1a/

这是我使用的代码：

<p class="header">
HEADER
</p>
<div class="header-bg"></div>

<p>
CONTENT
</p>
<p>
CONTENT
</p>
<p>
CONTENT
</p>
<p>
CONTENT
</p>
<p>
CONTENT
</p>
<p>
CONTENT
</p>
<p>
CONTENT
</p>
<p>
CONTENT
</p>
<p>
CONTENT
</p>
<p>
CONTENT
</p>
<p>
CONTENT
</p>
<p>
CONTENT
</p>
<p>
CONTENT
</p>
<p>
CONTENT
</p>
<p>
CONTENT
</p>

的CSS：

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: rgba(198, 115, 115, 1);
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  background-color: rgba(198, 115, 115, 1);
}
.header-bg {
  position: fixed;
  top: 50px;
  left: 0;
  height: 100px;
  width: 100%;
  background-image:linear-gradient(rgba(198, 115, 115, 1),rgba(47, 52, 172, 0));
}

p {
  text-align: center;
  padding: 20px 0;
}