如何修复 CSS 线性渐变出现水平条纹（断层）的问题-html教程-PHP中文网

如何修复 CSS 线性渐变出现水平条纹（断层）的问题

css 线性渐变在页面中显示为不连续的水平色带，根本原因是 body 未占据视口全高，导致渐变被“截断”并重复平铺；只需确保 html 元素高度为 100%，即可让渐变完整渲染。

css 线性渐变在页面中显示为不连续的水平色带，根本原因是 body 未占据视口全高，导致渐变被“截断”并重复平铺；只需确保 html 元素高度为 100%，即可让渐变完整渲染。

当为

设置 linear-gradient 作为背景时，若页面内容高度不足或容器未明确撑开，浏览器会将 body 视为“仅包裹内容”的非伸展元素。此时，background 默认以 background-repeat: repeat（尽管渐变本身不可重复）的方式在 body 的计算高度内渲染——而该高度往往远小于视口，导致渐变被压缩、采样失真，视觉上呈现为生硬的水平分段或色带（banding），尤其在深色过渡区域尤为明显。

根本解法：确保根容器具备明确的高度上下文

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh; /* 推荐：保证至少占满视口 */
  background: linear-gradient(
    135deg,
    rgba(45, 20, 44, 1) 0%,
    rgba(81, 10, 50, 1) 25%,
    rgba(128, 19, 54, 1) 50%,
    rgba(199, 44, 65, 1) 75%,
    rgba(238, 69, 64, 1) 100%
  );
}

✅ 关键说明：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

html { height: 100%; } 是必要前提——它使元素继承视口高度，为提供百分比高度的计算基准；
body { min-height: 100vh; } 比单纯 height: 100% 更健壮：既确保初始满屏渲染，又能在内容超出视口时自然扩展，避免滚动时底部留白或渐变截断；
移除过时的 -moz- / -webkit- 前缀（现代浏览器已原生支持 linear-gradient），精简代码并提升可维护性；
保留 filter（IE 兼容）仅当项目仍需支持 IE10/11；否则建议移除。

⚠️ 注意事项：

❌ 避免仅设置 body { height: 100vh; } —— 当页面内容高度超过视口时，会导致底部内容被裁切，且滚动后渐变无法延续；
❌ 不要依赖 * { height: 100%; } 全局重置，这会破坏弹性布局行为，引发不可预知的副作用；
✅ 若使用 CSS 自定义属性或 JS 动态控制渐变，建议将渐变定义在 :root 或 body 上，并通过 min-height: 100vh 保障渲染完整性。

总结：渐变断层不是 CSS 渐变本身的缺陷，而是文档流高度塌陷导致的渲染上下文缺失。通过 html { height: 100%; } + body { min-height: 100vh; } 组合，即可一劳永逸地解决该问题，同时保持响应式与可扩展性。