javascript - 在 Angular2 中设置背景并将封装设置为无

Question

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

app.component.html

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

app.component.ts(注意:封装设置为无)

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

应用程序组件.css

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

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

如果不是 ngStyle，我直接用类似的东西选择主体:

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

图像覆盖了整个页面，这正是我想要发生的。但有人告诉我直接选择 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>

应用程序组件.css

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

样式.css:

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

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