CSS 无法在 Chrome 中正确加载，屏幕一 Angular 出现双图像

Question

这是关于具有全屏图像背景的着陆页。

link to Codepen project 在这支笔上复制问题，将浏览器屏幕调整为移动宽度并将鼠标悬停在文本“租赁”上，您会注意到屏幕底部有一个大间隙。
我尝试使用以下样式解决此问题:

      html, body {
      background-image: url("https://greatofficespaces.net/wp- 
      content/uploads/2019/02/Skokie_Warehouse_For_Lease_Promo.jpg");

      /* Full height */
      height: 100vh; 
      width: 100vw;

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

当我将其作为本地文件运行时，而不是底部的空隙 浏览器屏幕边缘的图像加倍。同样在 chrome 浏览器中，css 没有按应有的方式加载 在加载 css 之前，纯黑色文本会闪烁几秒钟。

我阅读了关于堆栈溢出的图像优化技术以及针对不同的媒体查询和 srcset 使用不同的图像文件，但我认为这与此无关，我认为它是 css 中某处的错误。

这是完整的页面 https://github.com/KravMaguy/flyer1

非常感谢任何有关如何修复这些 css 错误的帮助。

Answer 1

通过将其更改为以下 css 来解决问题:

  html {
  background-image: url("https://greatofficespaces.net/wp- 
  content/uploads/2019/02/Skokie_Warehouse_For_Lease_Promo.jpg");

  /* Full height */
  height: 100vh; 
  width: 100vw;

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

专门删除“body”这个词 之前的 css class of body, html {styles etc...} 对 html 和 body 应用了相同的样式，当我删除其中一个时，我不再在浏览器的 Angular 落看到双图像，这意味着背景被分配给 html 和正文，产生双重图像和不正确的 css 加载。这是我对为什么会发生这种情况并已解决的猜测。