CSS背景渐变重复问题：添加background-repeat: no-repeat无效，求修复方案

仅添加background-repeat: no-repeat无效，核心原因是渐变背景的默认尺寸为auto（与元素自身尺寸一致），若元素未占满可视区域或渐变“画布”小于容器，就会出现重复。可通过以下方式解决：

方案1：让背景覆盖整个容器 #

给.bg1至.bg9类添加：

background-size: cover;

该属性会自动缩放渐变背景以填满容器，同时保留渐变比例，彻底避免重复。

方案2：强制背景匹配容器宽高 #

若需严格贴合容器尺寸，可设置：

background-size: 100% 100%;
background-repeat: no-repeat;

此方式会拉伸渐变填充容器，可能导致比例变形，按需选择即可。

额外注意：确保应用渐变的元素（如body）占满可视高度，避免因元素高度不足引发重复：

body {
  min-height: 100vh;
  margin: 0;
}

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