css - 如何在标题的 2 个固定背景之间设置实时文本

Question

我想要一个固定的页眉，页眉中的所有内容都应该固定在顶部。我遇到了麻烦，因为我有 2 个背景会夹入一些内容。所以基本上，如果您查看代码片段，我希望 1-header-holidaybg.png 位于顶部，然后是段落，然后是 3-header-holidaybg.png，然后是未固定的主要内容，并在标题后面滚动。背景和段落之间不能有任何空间，就像我现在这样，但我在完成这个方面遇到了很多麻烦。

header {
	position: fixed;
        top: 0px;
z-index: 100;
}

#headerbg {
	background: url("https://secure.feedingamerica.org/images/content/pagebuilder/1-header-holidaybg.png") no-repeat;
  width: 100%;
  	background-size: 100%;
    	height: 190px;
  }
#hbottom { 
background: url("https://secure.feedingamerica.org/images/content/pagebuilder/3-header-holidaybg.png") no-repeat;
min-height: 60px;
}

.container {
	margin: 0px 120px;
}

header p {
background: #fff;
padding: 10px 0px;
color: #333;

}



#main-content {
margin-top: 45%;
padding-top: 20px;
background: url("https://secure.feedingamerica.org/images/content/pagebuilder/holiday-bg.png") repeat;
color: red;
}

<header>
<div id="headerbg">
    
</div>
    <p>this content should display below the 1-header-holidaybg.png backbround but above the 3-header-holidaybg.png background</p>
<div id="hbottom"></div>
</header>
<div id="main-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><div>

Answer 1

我整理了一个 CodePen对你来说，这可能就是你要找的。

• 移动background: #fff直到 header元素。这可以防止滚动到后面的元素显示出来。
• 添加 position: relative到 main-content div 并使用 top: 0 将其对齐到顶部.这将相对于其父容器定位容器，在本例中为 body . (我添加了一个 height: 2000px 只是为了测试)
• 我还建议在 main-content 里面扔一个容器这将容纳您的段落文本； paragraphContent对于这个例子。然后您需要添加 position: relative到那个容器。这使该部分更加动态，因此您可以添加更多内容，而不必担心段落的样式过多。

position: fixed 的不幸部分是因为它从文档的标准流程中取出元素，所以很容易重叠，所以你在点击较小的视口(viewport)时要考虑到这一点。在您的示例中，标题中的段落文本在小视口(viewport)上换行为多行，这将背景向下推到主要内容之上。为了防止这是笔，我加入了一个媒体查询，当视口(viewport)低于 415 像素时，该媒体查询就会启动。