1

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

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

app.component.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)';

图像覆盖了整个页面，这是我想要发生的。但是有人告诉我直接选择身体是不好的做法。

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

谢谢

4

1 回答 1

1

您可以用模板的 div 覆盖主体，并用背景图像填充它，如此 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;  
}

样式.css：

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

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

于 2018-01-01T05:58:24.360 回答