主页中的背景图片不起作用？

Question

将选项设置为100％时，背景图像无法正常工作。

我正在使用角度和自举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

您可以使用视口高度的百分之vh。这些单位允许您根据视口宽度和视口高度的百分比指定尺寸。 more detail 像这样https://jsfiddle.net/L34zcpkt/1/

    body, html {
    height: 100%;
  }

  .bg {
    /* The image used */
    background-image: url("https://images.pexels.com/photos/556416/pexels-photo-556416.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");

    /* Full height */
    height: 100vh; // here 

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

其他代码相同

Answer 2

我复制了您的代码并添加了图片，该图片在下面适用。

您是否使用任何可以使背景隐式变小的东西？也许是引导程序？

  Future<> future = Producer.send(topic, genericRecord, dataSetID);
  future.get();

  return Boolean.TRUE;

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;
  }