Angular页面背景渐变仅覆盖容器，如何实现全屏铺满？

要实现全屏背景渐变覆盖，需要同时处理html和body的默认样式，以下是直接通过html标签内的style结合全局样式实现的方案：

修改后的index.html代码 #

<!doctype html>
<html lang="en" style="height: 100vh; margin: 0; background-image: linear-gradient(rgb(60,43,91), rgb(153,39,77)); background-repeat: no-repeat; background-size: cover;">
<head>
  <meta charset="utf-8">
  <title>Tutorial3</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <style>
    body {
      height: 100%;
      margin: 0;
      background: transparent;
    }
  </style>
</head>
<body>
  <app-root></app-root>
</body>
</html>

关键说明 #

• 给html标签添加inline style：设置height:100vh确保占满视口高度，定义渐变背景并通过background-size: cover保证完全覆盖。
• 重置body默认样式：
  • height:100%让body继承html的高度，占满整个视口
  • margin:0去掉浏览器默认的8px外边距，避免出现白色边框
  • background:transparent让body透明，直接显示html的渐变背景

原styles.css中针对html的样式可移除，已通过inline style实现对应效果。

内容的提问来源于stack exchange，提问作者Thomas the Dank Engine