CSS 线性渐变出现条纹断裂的解决方案-html教程-PHP中文网

CSS 线性渐变出现条纹断裂的解决方案

当为页面设置 linear-gradient 背景时，若未显式定义 HTML 或 body 的高度，浏览器可能仅按内容高度渲染背景，导致渐变被截断或呈现为水平色带；正确做法是确保根元素具备明确高度（如 html { height: 100% }），使渐变完整覆盖视口。

当为页面设置 `linear-gradient` 背景时，若未显式定义 html 或 body 的高度，浏览器可能仅按内容高度渲染背景，导致渐变被截断或呈现为水平色带；正确做法是确保根元素具备明确高度（如 `html { height: 100% }`），使渐变完整覆盖视口。

在实际开发中，使用 CSS 线性渐变（linear-gradient）作为页面背景是一种常见且美观的设计方式。但许多开发者会遇到一个典型问题：本应平滑过渡的渐变，却在页面上呈现出明显的水平“条纹”或“分段断裂”效果（如下图所示），尤其在深色多色渐变中尤为明显。

这个问题并非由渐变语法、颜色停靠点或浏览器兼容性引起，而根本原因在于：HTML 和 body 元素默认没有显式高度，导致 background 仅作用于内容所占的实际高度区域，而非整个视口。当页面内容较少（如仅有一个空

标签）时，body 高度可能远小于视口，渐变便被压缩、重复或截断，视觉上即表现为“断裂成行”。

✅ 正确解法是为元素设置 height: 100%：

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

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

下载

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%; /* 推荐同时设置，确保 body 至少撑满 html 高度 */
  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%
  );
}

⚠️ 注意事项：

❌ 不要仅给 body 设置 height: 100vh：虽然能临时解决视口内显示问题，但一旦页面内容超出一屏（需滚动），100vh 会固定高度，导致底部内容区域无背景，渐变无法随滚动延续；
✅ html { height: 100% } + body { min-height: 100% } 是更健壮的组合——它让 body 基于 html 的 100% 高度基准伸缩，既保证初始满屏渲染，又支持内容增长后的自然延展；
若使用 CSS 重置（如 * { margin: 0; padding: 0; }），请确认未意外覆盖 html 或 body 的默认行为，仍需显式声明高度；
渐变本身无需添加 background-size: cover（该属性对 background 的值无效），其天然铺满容器。

总结：CSS 渐变“断裂”本质是布局高度缺失所致，而非渐变缺陷。只需两行关键样式即可彻底修复——这是现代 CSS 响应式背景实践中的基础但易被忽视的重要细节。