你的线性渐变背景出现红蓝相间条纹（banding），并非代码逻辑错误，而是因 body 高度不足导致渐变被垂直重复平铺——只需设置 min-height: 100vh 并使用 background（而非 background-image）即可彻底解决。
你的线性渐变背景出现红蓝相间条纹（banding），并非代码逻辑错误，而是因 body 高度不足导致渐变被垂直重复平铺——只需设置 `min-height: 100vh` 并使用 `background`（而非 `background-image`）即可彻底解决。
在 CSS 中，background-image 仅定义图像源，但不控制背景的绘制行为；当元素内容为空（如本例中
内仅有一个空）、且未显式设置高度时，body 的计算高度往往仅为 0px 或极小值（例如浏览器默认的 auto 高度）。此时，linear-gradient() 生成的渐变图层会因尺寸过小而被浏览器自动平铺（repeat）填充整个视口——这正是你看到“红蓝相间条纹”的根本原因：不是渐变本身出错，而是同一段短渐变被反复垂直复制。
✅ 正确做法是：
- 使用 background 简写属性（自动包含 background-color、background-image、background-repeat 等），它能更可靠地禁用平铺；
- 强制 body 至少占据整个视口高度：min-height: 100vh；
- 可选但推荐：添加 background-repeat: no-repeat 显式声明（尽管 background 简写在单色/渐变场景下默认即为 no-repeat）。
以下是修正后的完整 CSS 示例：
body {
background: linear-gradient(to top right, red, blue);
min-height: 100vh;
margin: 0; /* 移除浏览器默认 body 外边距，避免白边 */
color: #fff;
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- to top right 表示从右下角指向左上角的渐变方向（起点为右下，终点为左上），若你实际想要“左上→右下”，请改为 to bottom right；
- 始终为 body 和 html 设置 margin: 0; padding: 0;，避免意外空白干扰布局；
- 若页面内容动态增长，min-height: 100vh 能确保首屏满屏渐变，同时允许内容自然撑高容器；
- 不要仅依赖 height: 100vh（可能导致内容溢出时无法滚动），min-height 是更健壮的选择。
最后，HTML 中建议为
添加文字或最小尺寸（如 min-height: 200px），以便直观验证背景是否真正覆盖全视口。渐变效果是否生效，本质是「容器是否有足够空间渲染一次完整渐变」——掌握这一原理，便能快速诊断和修复所有类似色带问题。
