Question

我有一个名为my-app的元素，其body和html设置为100％。

在my-app内我有另一个名为background-section的元素，其body和html设置为100％。在这个元素中，我有一个带背景图像的部分。我希望这个背景图片是全屏的。

<section class="background-section">
  <!-- this is another element -->
  <nav-bar></nav-bar>
  
  <div class="opening-msg">
    <div class="app-container">
      <h1>Find a perfect <br /> property</h1>
      <span class="caption">
          Connecting landlords & tenants through an easy to <br /> use web
          application built for all devices
        </span>
    </div>
  </div>
</section>

.background-section {
  width: 100%;
  background: linear-gradient( rgba(73, 77, 86, 0), rgb(73, 77, 86)), url('../../images/background-img2.jpg') no-repeat;
  background-size: 100%;
  box-sizing: border-box;
  height: 100%;
}

问题是，由于某种原因，图像没有全屏显示。不知道为什么会这样。

Answer 1

使用height:100vh和background-size: cover;来获得相同的效果。

＆＃13;

body, html {margin:0; padding:0;}

.background-section {
  width: 100%;
  background: linear-gradient( rgba(73, 77, 86, 0), rgb(73, 77, 86)), url('https://s-media-cache-ak0.pinimg.com/originals/90/6e/a5/906ea53ecaa5be963e960daf8b645af2.jpg') no-repeat;
  background-size: cover;
  box-sizing: border-box;
  height: 100vh;
}

＆＃13;

<section class="background-section">
  <!-- this is another element -->
  <nav-bar></nav-bar>
  <div class="opening-msg">
    <div class="app-container">
      <h1>Find a perfect <br /> property</h1>
      <span class="caption">
          Connecting landlords & tenants through an easy to <br /> use web
          application built for all devices
        </span>
    </div>
  </div>
</section>

＆＃13;

如何在聚合物2.0中制作全屏元素？

1 个答案: