Angular设置全屏背景图仅覆盖内容区域问题排查求助

问题原因 #

• Angular默认启用组件样式隔离（ViewEncapsulation.Emulated），你在app.component.scss中定义的html、body选择器仅作用于当前组件内部的DOM，无法匹配到项目外层index.html中的真实顶层html、body标签，样式不生效。
• 你在app.component.html中编写<html>、<head>、<body>属于完全错误的用法：Angular应用整体挂载在全局index.html的<body>下的<app-root>标签内，组件模板内编写的顶层标签最终会嵌套在<app-root>内部，不会被浏览器识别为页面顶层节点，属于无效DOM结构。
• 组件宿主元素<app-root>默认高度由内容撑开，你当前页面内容仅一行文本，因此<app-root>高度仅为一行文本高度，背景自然只会显示在对应区域。

解决步骤 #

1. 清理app.component.html的无效代码，仅保留业务内容：

<label class="title">Hello World</label>

2. 找到Angular项目根目录的全局样式文件src/styles.scss，添加全局基础样式：

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

3. 修改app.component.scss，通过:host选择器选中当前组件的宿主元素<app-root>，设置其全屏占比和背景样式：

:host {
  /* 宿主元素默认为行内元素，需设置为块级元素宽高才生效 */
  display: block;
  width: 100%;
  /* 直接占满整个视口高度，不需要继承父级高度 */
  min-height: 100vh;
  background-image: url('../assets/background.jpg');
  /* 背景图自适应铺满容器，不变形 */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

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