html - 主页中的背景图像不起作用？

Question

当我将该选项设置为 100% 时，背景图像不起作用。

我正在使用 angular 和 bootstrap 4。

<!--html code-->
<div class="bg">
<div style="text-align:center">
  <h1>
    Welcome
  </h1>
</div>
<router-outlet></router-outlet>

这是.scss代码

body, html {
    height: 100%;
  }

  .bg {
    /* The image used */
    background-image: url("~/assets/jonatan-pie-226805-unsplash.jpg");

    /* Full height */
    height: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

Answer 1

我复制了您的代码并添加了一张图片，效果如下。

您是否使用了任何可以隐式地保持背景较小的东西？也许是 Bootstrap ？

body, html {
    height: 100%;
  }

  .bg {
    /* The image used */
    background-image: url("https://www.placecage.com/g/1000/500");

    /* Full height */
    height: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!--html code-->
<div class="bg">
<div style="text-align:center">
  <h1>
    Welcome
  </h1>
</div>
<router-outlet></router-outlet>