如何在网站上实现连续、干净的背景渐变效果？

嘿，我太懂你遇到的这个糟心问题了！刚学CSS做渐变背景时我也踩过一模一样的坑——明明写了渐变代码，结果出来的效果却是一段段重复的，跟你截图里的样子简直一毛一样😅

其实原因超简单：CSS里的背景渐变默认会像普通背景图片一样自动重复平铺，再加上如果你的页面内容还没撑满整个浏览器窗口，body的高度不够，渐变就会在垂直方向反复出现，看起来就断成好几截了。

别担心，解决方法两步就能搞定，直接看具体操作：

• 第一步：先让页面的根容器（html和body）能占满整个浏览器窗口的高度，避免因为内容太少导致高度不足。用min-height: 100vh就能让元素高度至少等于浏览器视口高度，之后内容变多了也会自动拉伸。同时别忘了重置默认的边距和内边距，不然会出现多余留白：

html, body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
}

• 第二步：给body设置渐变背景时，加上background-repeat: no-repeat禁止渐变重复平铺。也可以把属性写在一行简写里，看起来更清爽：

body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  /* 这里可以换成你自己需要的渐变方向和颜色值 */
  background: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%) no-repeat;
}

要是你想要滚动页面时，渐变背景固定在浏览器窗口不跟着内容动，还能把no-repeat换成background-attachment: fixed，这样不管页面多长，渐变都会稳稳铺满整个视口，完全不会重复~

试一下这个方法，你就能得到期望中那种干净、连续的渐变背景啦！

备注：内容来源于stack exchange，提问作者Helmet22