html - 将英雄形象插入一个部分

Question

我想将主图附加到 HTML 部分。但问题是这张图片在被包裹到一个部分时并没有像预期的那样显示整个页面。

例如

    <div id="home">
      <div class="text-vcenter">
        <h1>Reunion Qualité</h1>
        <h2>Meeting Manager</h2>
        <svg height="10" width="605">
            <line x1="0" y1="0" x2="611" y2="0" style="stroke:rgb(255,255,255);stroke-width:3" />
        </svg>
        <h3>Namur-Belgium</h3>
      </div>
    </div>

可以，但是

<div>
    <div id="home">
      <div class="text-vcenter">
        <h1>Reunion Qualité</h1>
        <h2>Meeting Manager</h2>
        <svg height="10" width="605">
            <line x1="0" y1="0" x2="611" y2="0" style="stroke:rgb(255,255,255);stroke-width:3" />
        </svg>
        <h3>Namur-Belgium</h3>
      </div>
    </div>
</div>

不会。为什么 ？我该如何解决这个问题？

这是关于英雄形象的 CSS 链接:

html, body {
  height: 100%;
  width: 100%;
  font-family: 'Quicksand', sans-serif;
}

#home {
  background: url(../img/qualite_01.jpg) no-repeat center center fixed;
  color: #f6f8f8;
  display: table;
  height: 100%;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
}

Answer 1

第二个示例不起作用的原因是您没有指定第一个 div(包裹#hero div 的 div)的高度。所以只需将以下规则添加到您的 CSS 中:

body div {
  height: 100%;
}

百分比高度将高度定义为包含 block 高度的百分比(参见 MDN article about height 和 MDN article about percentage )。 #home 的高度设置为 100%，但它的包含 block 没有指定高度。另一方面，在第一个示例中，#home 的包含元素是 body，它指定了 100% 的高度。