代码一致但页面效果不同，线性渐变重复问题求助

核心原因分析 #

你遇到的渐变重复问题，根源在于body元素的高度计算逻辑和CSS背景的默认行为：

• 代码里给body设置了height: 100%，但这个百分比是基于父元素（<html>标签）的高度。如果<html>没有设置height: 100%，body的100%高度只会匹配页面内容的高度，而非整个视口高度。
• 当页面2的内容高度超过视口时，body会被内容撑开，但线性渐变默认的background-repeat: repeat属性会让渐变在超出初始高度的区域重复显示；而页面1的内容刚好填满视口，所以不会出现重复。
• 即使<html>设置了100%高度，当页面内容超过视口时，body的height:100%也不会自动延伸，同样会导致渐变只覆盖初始视口高度，剩余区域重复渐变。

解决方案 #

针对这个问题，有两种常用的修复方式：

方式1：确保body占满视口且随内容延伸 #

修改CSS，给<html>和<body>都设置高度，并给body添加min-height: 100vh（vh是视口高度单位，100vh即整个视口高度）：

html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100vh; /* 确保至少占满视口，内容超出时自动延伸 */
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 0, 0.5),
    rgba(0, 0, 255, 0.5)
  ), url("img/background.jpg");
  background-repeat: no-repeat; /* 显式关闭重复 */
  background-size: cover; /* 让背景覆盖整个body区域 */
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
}

方式2：强制背景不重复并覆盖整个区域 #

如果需要背景固定在视口（不随内容滚动），可以直接设置背景属性：

body {
  margin: 0;
  height: 100%;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 0, 0.5),
    rgba(0, 0, 255, 0.5)
  ), url("img/background.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed; /* 让背景固定在视口 */
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
}

内容的提问来源于stack exchange，提问作者support with ignite