CSS中SVG渐变背景重复显示问题求助

问题原因 #

你的SVG背景出现重复，核心原因有两个：

• SVG自身尺寸远小于浏览器视口，默认background-repeat属性为repeat，即便手动添加no-repeat，若不设置背景尺寸适配视口，仍会因SVG过小导致视觉上的重复感
• 未设置body的最小高度，默认body高度仅由内容撑开，无法覆盖整个视口，背景无法完整铺满页面

解决方案 #

修改body的CSS样式，补充以下关键属性：

body {
  background-image: url(./color-morph.svg);
  background-repeat: no-repeat; /* 强制禁止背景重复 */
  background-size: cover; /* 等比例缩放SVG，使其完全覆盖视口，超出部分自动裁剪 */
  min-height: 100vh; /* 确保body高度至少占满整个浏览器视口 */
  background-position: center center; /* 让SVG在视口中居中显示，避免偏移 */
}

额外修正 #

你的全局样式选择器缺少通配符*，这会导致样式无法作用于所有元素，需修正为：

* {
  color: white;
  text-align: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

效果说明 #

修改后，SVG背景会完整铺满整个浏览器视口，且不会出现重复显示的问题，同时页面高度会随视口自适应，避免背景断裂。

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