如何为Angular组件设置背景图像？

Question

在我的Angular应用程序中，我想为特定视图设置背景图片。

为此，我在组件的CSS文件中添加了以下内容：

body {
       background-image: url("../../../assets/images/backgroundImage.jpg");
   }

然而，背景没有改变。

这是包含上述CSS代码的文件路径：

angular-app/src/app/users/profile/profile.component.css

而这是背景图片的文件路径：

angular-app/src/assets/images/backgroundImage.jpg

---

我也尝试过

body {
       background-image: url("assets/images/backgroundImage.jpg");
   }

......但是这导致编译期间出现警告，也没有起作用。

我做错了什么？

---

我给根元素添加了类“root”，然后将以下内容放入css文件中：

.root {
   background-image: url("../../../assets/images/backgroundImage.jpg");
}

现在背景已经改变，但屏幕的垂直长度并未完全改变（底部仍然是白色）：

- Tommy

---

如果你想让它应用于body标签，把它放在styles.css中。 - user184994

但那将会应用于所有组件/视图，不是吗？...我希望它仅应用于此特定视图。 - Tommy

然后，您需要将其应用于该组件的根标记，即如果您的HTML文件中的第一行是<div id="test" />，则应将其应用于#test。当Angular构建应用程序时，它会应用称为ViewEncapsulation的东西，因此组件CSS文件中的CSS通常仅适用于该特定组件中的HTML。 - user184994

为了不填满整个屏幕，请添加以下内容：html，body { margin: 0; height: 100％; } - Obed Amoasi

@Obed 谢谢你的建议...我已经添加了，但它并不能让图片覆盖整个屏幕。 - Tommy

Answer 1

根据Angular，在@Component元数据中指定的样式仅适用于该组件的模板。您可以使用以下方法进行处理。

在您的styless.css文件中添加以下内容：

.selector {
       background-image: url("../../../assets/images/backgroundImage.jpg");
   }

现在在您的组件中，您可以这样做。

ngOnInit() {
    document.body.className = "selector";
  }

ngOnDestroy(){
    document.body.className="";
  }

但是这种方法并不推荐，我不知道你的代码是什么样子的，但一定有另外一种方式。

1. 将你的组件缩放以适应整个视口
2. 在你的组件上设置背景

当做完后，我会在 Plunker 上工作并将文件链接作为编辑提供。

- Obed Amoasi

---

谢谢您的回答...不幸的是，当我将.selector放入styles.css文件中时，无法再解析URL...(我还尝试使用'background-image: url("./assets/images/backgroundImage.jpg");'，但也没有起作用)。 - Tommy

Answer 2

我会为这个问题添加另一个答案，因为它与我的先前答案完全不同。

在您的组件中，从angular/core导入ViewEncapsulation。

import { ..., ViewEncapsulation } from '@angular/core';

在您的 @component 元标签中添加 encapsulation: ViewEncapsulation.None,。

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
  ...
})

这会有一个副作用，一旦加载，你组件中的所有样式将对所有其他组件都可用。

您可以在Angular页面上了解更多信息。

- Obed Amoasi

---

这会使背景图像完全消失（除了屏幕底部的小插座）。 - Tommy

Answer 3

你可能需要创建一个服务或使用ngrx来在子组件和app.component之间进行通信，以便使用ngClass切换app.component.html的样式。

- Q.Z

Answer 4

这对我来说很有效。

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

constructor(private renderer: Renderer2) {
    this.renderer.setStyle(document.body, 'background', 'url("../../../assets/images/form-bg.png")');
    this.renderer.setStyle(document.body, 'background-size', 'cover');
    this.renderer.setStyle(document.body, 'background-repeat', 'no-repeat');
    this.renderer.setStyle(document.body, 'background-attachment', 'fixed');
  }

- Ajith D

---

nop这个URL与你的目录树无关，你需要记住在产品中你总是有：index.html、styles.css和一个位于“根目录”的assets文件夹。通常使用./assets来工作。 - undefined

Answer 5

我在我的组件中也遇到了同样的问题。我通过把CSS代码放在styles.css文件中来解决这个问题，我使用div标签选中了整个body。

.background-IMG {
  background-image: url(../src/app/components/login/images/bg.jpg);
  width: 100%;
  height: 100%;
}

- killnotation