html - 将标题中的背景图像比例级别匹配到背景大小 :cover

Question

我有两个 block 元素，第一个 ( <section> ) 是浏览器窗口的大小并呈现动态大小的背景图像(使用 background-size: cover; )。另一个是固定的 <header>高度恒定为 62px 和更大的 z-index .

HTML 主体:

<header></header>
<section></section>

CSS:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
header {
    position: fixed;
    z-index: 100;
    height: 62px;
    width: 100%;
    background-image: url(image.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
 }
section {
    height: 100%;
    width: 100%;
    background-image: url(image.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

我想要 <header> 的背景图片具有等于​​ <section> 的“比例因子” , 但只显示恒定高度。这意味着它应该准确显示 <section> 的前 62 个像素行。元素正在呈现，因此对用户不可见(当他处于垂直位置 0/尚未滚动时)。

fiddle 链接:https://jsfiddle.net/f1nhum9u/1/

Answer 1

您可以为 bg header 添加 fixed 行为。带有背景附件:

This keyword means that the background is fixed with regard to the viewport. Even if an element has a scrolling mechanism, a ‘fixed’ background doesn't move with the element.

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
header {
  position: fixed;
  z-index: 100;
  height: 62px;
  width: 100%;
  background-image: url(http://www.nasa.gov/images/content/696289main_O_Star_Binary.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  /*ADD THIS*/
  background-attachment: fixed;
}
section {
  height: 100%;
  width: 100%;
  background-image: url(http://www.nasa.gov/images/content/696289main_O_Star_Binary.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

<header></header>
<section></section>
<br><br><br><br>