在 Angular2 中设置背景，封装设置为 none

Question

我正在尝试通过以下方式将图像设置为整个页面的背景：

app.component.html

<div [ngStyle]="{'background-image': 'url(' + somePhoto + ')'}">
  <h1>
    Hello, world
  </h1>
</div>

app.component.ts（注意：封装设置为none）

import { Component, ViewEncapsulation } from '@angular/core';
import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
  constructor() { }

  ngOnInit(): void {
    console.log('hello, world');
  }
}

app.component.css

body {
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
   background-attachment: fixed;
 }

问题是，当使用 [ngStyle] 时，图像仅覆盖页面的 header 部分。

如果不是 ngStyle，我 select body 直接用类似的东西：

 document.body.style.backgroundImage = 'url(someimage.jpg)';

图像覆盖了整个页面，这就是我想要的。但有人告诉我 select 直接 body 是不好的做法。

如何使用 [ngStyle]（或其他任何东西）来创建覆盖整个页面的背景图像？

谢谢

Answer 1

您可以用模板的 div 覆盖正文，并用背景图片填充它，如 this stackblitz:

所示

app.component.html

<div class="outerDiv" [ngStyle]="{'background-image': 'url(' + somePhoto + ')'}">
    <div>
        <h1>
            Hello, world!
        </h1>
    </div>
</div>

app.component.css

.outerDiv {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;  
}

styles.css:

html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

注意：我添加了一个外部 div 以允许设置 overflow: hidden。如果没有该样式属性，h1 元素的默认边距会阻止 div 填充正文顶部（至少在 Windows 上的 Chrome 中）。

在 Angular2 中设置背景，封装设置为 none

Setting background in Angular2 with encapsulation set as none

javascript

css

angular2viewencapsulation

angular