网站登录页面背景线性渐变重复，如何解决？

渐变背景默认会以平铺方式重复显示，要解决这个问题，你只需要给body添加background-repeat: no-repeat属性。另外你设置的height:400%和width:400%会让body尺寸远大于视口，容易导致渐变在超出视口的区域重复，结合背景固定或适配视口的设置会更合理。

推荐修改后的CSS代码：

body {
  background-image: linear-gradient(to bottom, white, grey);
  /* 禁用背景重复平铺 */
  background-repeat: no-repeat;
  /* 让背景固定在视口，滚动页面时不会重复出现 */
  background-attachment: fixed;
  /* 确保背景覆盖整个视口高度 */
  min-height: 100vh;
  width: 100%;
}

关键说明： #

• background-repeat: no-repeat：这是阻止渐变重复的核心属性，直接禁用背景图像的重复行为。
• background-attachment: fixed：让渐变背景固定在视口位置，即使页面内容滚动，背景也不会跟随滚动产生重复。
• min-height: 100vh：确保body至少占满整个视口高度，避免内容不足时背景只显示一部分。
• 移除height:400%和width:400%：这类设置会让body尺寸异常偏大，改用100%或100vh能让背景适配正常视口范围，避免不必要的重复。

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