如何让<html>根元素的背景渐变延伸至滚动超出区域？

问题分析 #

浏览器的滚动超出（overscroll）区域仅会继承<html>标签的纯色背景色，无法直接识别并应用渐变背景——这就是你直接给<html>设置background: linear-gradient时，滚动到页面上下外的区域无法显示渐变的原因。而当<html>设为红色纯色、<body>设渐变时，滚动到页面外会显示红色背景，正是因为浏览器优先将纯色作为overscroll区域的背景。你需要的是让<html>的水平渐变也能延伸到页面上下方的overscroll区域。

解决方案 #

通过给<html>添加固定定位的伪元素，模拟覆盖整个视口及超出部分的渐变背景，就能实现需求：

代码示例 #

<html>
  <head>
    <style>
      html::before {
        content: '';
        /* 固定定位覆盖视口及上下全部超出区域 */
        position: fixed;
        top: -100%;
        left: 0;
        right: 0;
        bottom: -100%;
        /* 你的水平渐变样式 */
        background: linear-gradient(90deg, rgba(214,124,123,1) 0%, rgba(214,188,123,1) 100%);
        /* 置于页面内容下方，避免遮挡 */
        z-index: -1;
      }
      body {
        margin: 0;
        min-height: 100vh;
        /* 确保body内容层级高于伪元素 */
        position: relative;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

原理说明 #

• 固定定位的伪元素通过top: -100%和bottom: -100%，将覆盖范围延伸到视口上下方的overscroll区域；
• 伪元素的渐变背景会固定在视口位置，滚动页面时overscroll区域会持续显示该渐变；
• 给<body>设置相对定位和层级，确保页面内容不会被伪元素遮挡。

替代方案（无需伪元素） #

如果不想使用伪元素，也可以通过固定背景配合放大背景尺寸实现：

html {
  min-height: 100vh;
  background: linear-gradient(90deg, rgba(214,124,123,1) 0%, rgba(214,188,123,1) 100%);
  /* 固定背景位置，避免随滚动移动 */
  background-attachment: fixed;
  /* 放大背景垂直尺寸，覆盖overscroll区域 */
  background-size: 100% 300%;
}
body {
  margin: 0;
  min-height: 100vh;
}

这种方法需要根据实际场景调整background-size的垂直比例，确保渐变能覆盖上下overscroll区域。

内容的提问来源于stack exchange，提问作者Gavan