Html 如何为不同的5页应用不同的（整页）背景？

目前我正在使用Angular 5做水疗

我想用背景（不仅仅是一个组件）填充整个屏幕，但我希望每个页面都有不同的背景，我如何才能做到这一点

我已经在相关页面的component.css中尝试了这段代码（例如 home.component.css）：

（以背景色为例）

使用这种方法，我认为我可以覆盖每个组件的主体背景，但它似乎不起作用，页面仍然是空的

---

如果您能给我任何帮助，我将不胜感激，提前谢谢。

我想您的问题是，当您添加

body {
  background-color: aqua;
}

对于您的组件css，Angular会将其重写为

body[_ngcontent-c0] {
  background-color: yellow;
}

如果选中，可以在开发工具中看到它。因此，样式不会附着到主体。可以使用“渲染器2”更改每个零部件的主体样式。例如：

import { Component, Renderer2 } from '@angular/core';

@Component({
  selector: 'home',
  templateUrl: './home.component.html',
  styleUrls: [ './home.component.css' ]
})
export class HomeComponent  {
  name = 'Home';

  constructor(private renderer: Renderer2) {
    this.renderer.setStyle(document.body, 'background-color', 'yellow');
  }
}

类似问题：
角度文档：

---

希望这能有所帮助。

我想你的问题是当你添加

body {
  background-color: aqua;
}

对于您的组件css，Angular会将其重写为

body[_ngcontent-c0] {
  background-color: yellow;
}

如果选中，可以在开发工具中看到它。因此，样式不会附着到主体。可以使用“渲染器2”更改每个零部件的主体样式。例如：

import { Component, Renderer2 } from '@angular/core';

@Component({
  selector: 'home',
  templateUrl: './home.component.html',
  styleUrls: [ './home.component.css' ]
})
export class HomeComponent  {
  name = 'Home';

  constructor(private renderer: Renderer2) {
    this.renderer.setStyle(document.body, 'background-color', 'yellow');
  }
}

类似问题：
角度文档：

---

希望这有帮助。

在所有需要背景色的组件中添加以下组件。要使用的颜色可以在输入属性中传递：

import { Component, OnInit } from '@angular/core';
import { Input } from '@angular/core';

@Component({
  selector: 'app-bg',
  templateUrl: './bg.component.html',
  styleUrls: ['./bg.component.scss']
})
export class BgComponent implements OnInit {

  @Input() bgColor = 'red';

  constructor() { }

  ngOnInit() {

  }

  public getBgColor() {
    return {
      'background-color': this.bgColor
    };
  }
}

以下是CSS bg.component.scss：

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

以及模板bg.component.html：

<div class="bg" [ngStyle]="getBgColor()"></div>

最后，在所有需要背景色的组件中，添加以下内容：

<app-bg [bgColor]="'blue'"></app-bg>

---

在所有需要背景色的组件中添加以下组件。要使用的颜色可以在输入属性中传递：

import { Component, OnInit } from '@angular/core';
import { Input } from '@angular/core';

@Component({
  selector: 'app-bg',
  templateUrl: './bg.component.html',
  styleUrls: ['./bg.component.scss']
})
export class BgComponent implements OnInit {

  @Input() bgColor = 'red';

  constructor() { }

  ngOnInit() {

  }

  public getBgColor() {
    return {
      'background-color': this.bgColor
    };
  }
}

以下是CSS bg.component.scss：

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

以及模板bg.component.html：

<div class="bg" [ngStyle]="getBgColor()"></div>

最后，在所有需要背景色的组件中，添加以下内容：

<app-bg [bgColor]="'blue'"></app-bg>

在每个组件的css中编写您的身体css

背景色

代码，例如，您有关于和联系人页面，因此关于在

about.component.css中执行，对于联系人，在
contact.component.css
中执行。。。。。如果正常的一个不起作用，试试这个
body{background color:aqua！important；}
全局样式使用“styles.css”@RajnishRajput这对我不起作用。@pransanths它不是真正的全局样式，因为每个页面都有不同的背景。用每个组件的css编写你的body css
background color
代码，例如，您有about和contact页面，所以about在
about.component.css
中执行，contact在
contact.component.css
中执行。。。。。如果正常设置无效，请尝试此
body{background color:aqua！important；}
用于全局样式设置，使用“style.css”@RajnishRajput这对我不起作用。@pransanths它不是真正的全局设置，因为每个页面都有不同的背景。@Mike-访问特定于浏览器的API，包括窗口，文档和其他DOM API在Angular中是一种不好的做法。如果您使用Angular Universal以获得更好的用户体验和SEO，那么使用document对象将是一个巨大的挑战problem@Mike-访问特定于浏览器的API（包括窗口、文档和其他DOM API）在Angular中是一种不好的做法。如果您使用Angular Universal以获得更好的用户体验和SEO，那么使用文档对象将是一个问题