Angular 4 全图背景答案

【问题标题】：Angular 4 full image backgroundAngular 4 全图背景
【发布时间】：2018-03-25 15:08:18
【问题描述】：

我是 Angular 框架和 TypeScript 的新手，在创建简单页面时遇到了这个问题。

我想给页面一个完整的图像背景，但背景图像只会出现在 HTML 标记的子元素（见图像）后面。因此，经过多次尝试和失败后，我尝试做同样的事情，而是使用在线 html、css 编辑器（参见 sn-p）。而这位编辑给出了预期和想要的结果？？？我是否缺少 html 上方的 DOM 元素或 Angular 4 框架是否添加了另一个根？？？

Current situation

html { 
    background: url(http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

<html>
    <body>
        <div>
            <h1>Title</h1>
            <h3>Subtitle</h3>
        </div>
    </body>
</html>

【问题讨论】：

尝试将主父 div 的高度设置为 100%，它需要一些容器来渲染图像！或者设置html或者body的高宽100%

标签： html css angular dom

【解决方案1】：

您可以在应用条目周围的 div 中添加一个类。

index.html

<style>
  .bg{
    width: 100%;
    height: 100%;
    background: url('your-url') no-repeat center;
    background-size: 100% 100%;
    background-position: top center;
  }
</style>
  ...
  <div class="bg">
    <app>
      Loading...
    </app>
  </div>

【讨论】：

非常感谢我编辑了 index.html 文件，它是所有文件的父文件。现在我可以放一个完整的图像背景了。