CSS：标题和内容线性渐变背景

Question

这个问题有两个方面，一个是技术问题，一个是主观问题，这首先是技术问题：

我希望标题渐变与内容渐变对齐，以便看起来无缝，因此我需要为两者设置单独的渐变配置。在此示例中，您可以看到，如果我对两个元素都应用相同的渐变，则会有明显的区别。这是JSFiddle：https://jsfiddle.net/g73s04vd/

这是我正在使用的代码：

<style>
.header {
  color: white;
  height: 100px;
  background: linear-gradient(159.17deg, #022461 -9.41%, #455c9a 97.45%);
}

.content {
  color: white;
  height:500px;
  background: linear-gradient(159.17deg, #022461 -9.41%, #455c9a 97.45%);
}
</style>

<div class="header">
  This is the header
</div>
<div class="content">
  This is the content
</div>

如何配置每个渐变，以便标题和内容之间没有区别？

第二个问题：由于内容将滚动到标题的下方，因此，由于没有定义行，因此看起来就像“消失了”。从美学的角度来看，我是否应该考虑以这种方式设置页面格式？

感谢您的任何输入。

Answer 1

您应该在具有背景渐变的两个div周围添加一个容器div：