你的 linear-gradient 背景出现红蓝交替的“色带”或“条纹”，并非渐变失效，而是因容器高度不足导致背景重复平铺——只需设置 min-height: 100vh 并使用 background（而非 background-image）即可彻底解决。
你的 `linear-gradient` 背景出现红蓝交替的“色带”或“条纹”，并非渐变失效，而是因容器高度不足导致背景重复平铺——只需设置 `min-height: 100vh` 并使用 `background`（而非 `background-image`）即可彻底解决。
在实际开发中，许多开发者仅写一行 background-image: linear-gradient(...) 却发现渐变呈现为不连续的色块或横向/纵向条纹（如你截图中从左上到右下方向出现多组红—蓝断层），这通常不是语法错误，而是 CSS 渲染机制导致的视觉假象。
根本原因在于：
- 默认高度由内容撑开，而你的 HTML 中仅有一个空 ，导致 body 高度极小（可能仅几十像素）；
- 当渐变背景应用于一个远小于视口的容器时，浏览器会将该渐变图案按默认方式平铺（repeat），从而在垂直方向反复渲染同一段短渐变，形成红—蓝—红—蓝的条纹效果；
- 此外，单独使用 background-image 未重置其他背景属性（如 background-color、background-repeat），可能叠加默认行为，加剧异常。
✅ 正确解法是两步到位：
- 用 background 简写替代 background-image —— 自动继承 background-repeat: no-repeat，避免意外平铺；
- 确保容器覆盖整个视口高度 —— 通过 min-height: 100vh 强制 body 至少占满屏幕，使渐变有足够空间自然过渡。
优化后的 CSS 如下：
body { background: linear-gradient(to top right, red, blue); min-height: 100vh; margin: 0; /* 可选：消除 body 默认外边距 */ color: #fff; /* 提升可读性（若添加文字） */ }同时建议补充 HTML 内容以验证效果（非必需，但便于调试）：
<div style="padding: 2rem; font-size: 1.5rem;">Linear Gradient Background</div>
⚠️ 注意事项：
- 不要遗漏 min-height: 100vh —— 仅靠 height: 100vh 在内容超长时可能导致底部被截断；
- 避免在 body 上设置 background-color 与 background-image 混用，优先使用 background 简写统一控制；
- 若需兼容老版本 Safari，可添加 -webkit-linear-gradient 前缀（现代项目通常已无需）；
- “to top right” 是标准语法，等价于 to 45deg，方向清晰且可读性强。
总结：渐变“出条纹”本质是尺寸 + 平铺的组合问题，而非颜色或角度错误。掌握 background 简写的语义优势与 vh 单位的布局意义，即可一劳永逸地实现平滑、全屏、无重复的线性渐变背景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
