Angular 5结合Angular Material 2：为app.component添加背景的最优方法

嘿，我来帮你搞定这个问题！在Angular 5搭配Angular Material 2的项目里给app.component加背景，旧方法失效大多是因为Angular的组件样式封装机制，加上Material自带的样式优先级导致的。下面是几种当前推荐的靠谱实现方式，结合你给出的图片路径../../images/background.jpg来讲解：

Angular组件默认自带ViewEncapsulation（样式封装），所以直接在app.component.css里写样式是最规范的，不会污染全局样式。

首先确认你的目录结构：如果app.component.css在src/app/下，而图片在src/images/下，那../../images/background.jpg这个路径是完全正确的（从app目录往上两级到src，再进入images文件夹）。

然后在app.component.css中添加以下代码：

:host {
  display: block;
  min-height: 100vh; /* 确保背景铺满整个视口高度 */
  background-image: url('../../images/background.jpg');
  background-size: cover; /* 让图片自适应容器，避免拉伸变形 */
  background-position: center center; /* 让图片居中显示 */
  background-attachment: fixed; /* 可选：滚动页面时背景固定不动 */
}

这里的:host是Angular特有的选择器，专门用来选中组件的宿主元素（也就是app-root标签），这样样式只会作用在app.component的根元素上，不会影响其他组件。如果发现Material的默认背景色覆盖了你的设置，不用急着加!important，先检查组件的ViewEncapsulation是否被改成了None——保持默认的Emulated模式就好，它会让组件内的样式优先级高于全局样式。实在不行的话，再给样式属性加上!important（尽量少用，避免样式冲突）。

如果你只是想快速验证效果，或者样式逻辑很简单，可以直接在app.component.html的根容器上写内联样式：

<div style="display: block; min-height: 100vh; background-image: url('../../images/background.jpg'); background-size: cover; background-position: center center;">
  <!-- 你的所有组件内容，比如<router-outlet>、<mat-sidenav-container>等 -->
</div>

不过这种方式不利于样式的后期维护，只适合临时测试用。

如果希望整个应用都使用这个背景，也可以在全局样式文件（比如src/styles.css或src/styles.scss）中设置，但要注意Angular Material的全局背景可能会覆盖它，所以需要调整优先级：

body {
  margin: 0; /* 去掉body默认的边距 */
  min-height: 100vh;
  background-image: url('./images/background.jpg'); /* 这里路径是相对于styles.css的，因为它在src目录下，所以直接写./images即可 */
  background-size: cover;
  background-position: center center;
}

但这种方式会影响所有组件，如果其他组件有自己的背景色，还需要额外覆盖，所以一般不推荐，优先用方法1。

• 路径校验：如果浏览器控制台报图片404错误，一定要检查路径是否正确。Angular构建时会处理src目录下的静态资源，确保图片放在src目录内。
• Material容器组件适配：如果你用了<mat-sidenav-container>这类Material容器，它默认有背景色，需要给它设置透明才能透出你的背景：

:host mat-sidenav-container {
  background-color: transparent;
}

内容的提问来源于stack exchange，提问作者Daniel Turcich