Question

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我为你准备了CodePen，可能就是你想要的。

将background: #fff移至header元素。这可以防止滚动的项目显示通过。
将position: relative添加到main-content div，并使用top: 0将其对齐到顶部。这将使容器相对于其父容器定位，在这种情况下是body。（我添加了height: 2000px仅供测试）
我还建议在main-content内放入一个容纳段落文本的容器;这个例子是paragraphContent。然后，您需要将position: relative添加到该容器中。这使得该部分更具动态性，因此您可以添加更多内容，而无需担心段落样式太多。

position: fixed的不幸部分是，因为它从文档的标准流中取出项目，所以事物很容易重叠，所以你想在碰到较小的视口时考虑到这一点。在您的示例中，标题中的段落文本将换行到小视口上的多行，这会将背景向下推到主要内容上。为了防止这是笔，我投入了一个媒体查询，在视口低于415px时启动。

如何在标题的2个固定背景之间使用实时文本

1 个答案: