如何修复CSS渐变背景在.box元素上下重复显示的bug

渐变背景在.box元素上下重复显示，核心是两个样式配置问题导致的：

• 你给html、body设置的height: 100%只能让根元素高度匹配当前视口高度，当页面内容高度超过视口高度触发滚动后，超出视口的区域会重复填充渐变背景
• CSS中渐变属于背景图片的一种，默认background-repeat属性值为repeat，未主动关闭时会自动重复填充空白区域

修改html、body的CSS配置即可，调整后的完整代码如下：

html, body {
  font-family: 'Zen Kurenaido', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: hsla(229, 86%, 81%, 1);
  background-image: linear-gradient(225deg, hsla(229, 86%, 81%, 1) 0%, hsla(246, 80%, 75%, 1) 28%, hsla(318, 80%, 79%, 1) 69%, hsla(30, 80%, 75%, 1) 100%);
  background-image: -moz-linear-gradient(225deg, hsla(229, 86%, 81%, 1) 0%, hsla(246, 80%, 75%, 1) 28%, hsla(318, 80%, 79%, 1) 69%, hsla(30, 80%, 75%, 1) 100%);
  background-image: -webkit-linear-gradient(225deg, hsla(229, 86%, 81%, 1) 0%, hsla(246, 80%, 75%, 1) 28%, hsla(318, 80%, 79%, 1) 69%, hsla(30, 80%, 75%, 1) 100%);
  /* 替换原height:100%，保证根元素高度至少撑满整个视口 */
  min-height: 100vh;
  /* 关闭背景重复 */
  background-repeat: no-repeat;
  /* 背景尺寸覆盖整个元素 */
  background-size: cover;
  /* 清除浏览器默认的body外边距，避免出现多余留白 */
  margin: 0;
}

.box {
  /* 去掉冗余的background-color，后续的background属性会覆盖该配置 */
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  padding: 18px;
  width: 400px;
  height: 300px;
}

如果需要渐变背景不随页面滚动位移，可以在html、body的样式中额外添加一行background-attachment: fixed;即可。

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