Question

我网站主页的标题包含以下布局：

<header>
  <div class="navbar-lock"></div>
  <div class="hero"></div>
</header>

其中div.navbar-lock是固定导航，初始高度为90px，div.hero包含一些标题文字。在视觉上，我想给出一个背景图像（2000px x 481px）跨越两者的高度和宽度的外观。在滚动时，固定导航栏的背景将是图像的前90px;当滚动位置返回页面顶部时，标题将再次显示为一个背景图像。

我尝试了什么：

接近A ：

header {
  background: #F60 url(../images/header_bg.jpg) no-repeat 0 0;
  background-size: cover;
}
div.navbar-lock {
  background: #F60 url(../images/header_bg.jpg) no-repeat 0 0;
  background-size: cover;
  min-height: 90px;
  padding-top: 20px;
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
}

方法B （将图像裁剪为2）：

div.navbar-lock {
  background: #F60 url(../images/header_bg.jpg) no-repeat 0 0;
  background-size: cover;
}
div.hero {
  background: #F60 url(../images/header_bg.jpg) no-repeat 0 -90px;
  background-size: cover;
  position: relative;
  top: 90px;
  padding: 80px 0 134px; // padding to properly position its text
}

但是在两次尝试中，我都无法使图像正确排列。我在这里错过了什么？

Answer 1

我会将标题和英雄div放入父div中。并将图像放在父div上。

如何使用相同的背景图像对齐2个堆叠元素，使其看起来像一个图像？

1 个答案: