这是我的代码。这是我的 HTML。我希望页眉中有一个图像背景和滑过页眉的部分。
<body>
<header id=slideover>
<div> Hello World</div>
</header>
<section>
<div> stuff</div>
<div> stuff</div>
<div> stuff</div>
</section>
</body>
最佳答案
这是您可以实现的一种方法:使用带有 position:fixed 的固定高度 header 和等于 header 高度的 margin-top 部分:
html, body {
margin: 0;
}
header {
position: fixed;
height: 80px;
background: url(https://images.pexels.com/photos/111091/pexels-photo-111091.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb) no-repeat center;
color: white;
width: 100%;
top: 0;
line-height: 80px;
padding: 0 16px;
box-sizing: border-box;
}
section {
margin-top: 80px;
background: #fff;
position: relative;
width: 100%;
padding: 16px;
box-sizing: border-box;
}<body>
<header id=slideover>
<div> Hello World</div>
</header>
<section>
<div> stuff</div>
<div> stuff</div>
<div> stuff</div>
<div> stuff</div>
<div> stuff</div>
<div> stuff</div>
<div> stuff</div>
<div> stuff</div>
<div> stuff</div>
<div> stuff</div>
<div> stuff</div>
<div> stuff</div>
<div> stuff</div>
<div> stuff</div>
<div> stuff</div>
<div> stuff</div>
<div> stuff</div>
<div> stuff</div>
<div> stuff</div>
<div> stuff</div>
<div> stuff</div>
</section>
</body>关于javascript - 有没有办法让页面主体像在 WordPress 网站上那样在页面顶部的图像上滑动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45851888/