Angular项目中如何解决页面body背景渐变重复显示问题

你的问题根源是路由加载的页面包含了完整的HTML文档结构（<html>、<head>、<body>标签），而Angular应用的根页面index.html已经存在一个<body>元素，两个<body>都应用了背景渐变样式，导致出现双重背景效果。

解决方案： #

• 移除路由组件的完整HTML结构
  路由加载的组件不需要完整的HTML文档，只保留组件内部的内容即可。将你的示例页面修改为：

  <!-- 原<body>标签内的业务代码 -->
  

  Angular路由的作用是把组件内容插入到router-outlet中，<html>、<head>、<body>这类根标签只应该出现在项目根目录的index.html里。

• 确保根背景样式唯一生效
  保留你给body设置的渐变样式：

  body {
    background: linear-gradient(90.00deg, rgb(146, 133, 255), rgb(158, 192, 252) 100%);
  }
  

  同时为路由内容容器设置透明背景，避免覆盖根背景：

  .main-container {
    background-color: transparent;
  }
  

• 检查所有路由组件模板
  逐一排查所有路由组件的模板，确保没有重复的<html>、<head>、<body>标签，只保留组件功能所需的DOM结构。

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