HTML页面linear-gradient背景无法铺满全屏问题排查与解决

问题说明 #

尝试为HTML页面设置linear-gradient线性渐变作为背景，但应用CSS样式后，背景未铺满整个页面，反而出现重复平铺效果。

原因分析 #

• CSS中background-image的默认重复属性为repeat，当渐变的渲染高度小于元素实际高度时，就会自动重复平铺渐变图案
• <body>元素的高度默认由内部内容撑开，此示例中仅包含"Hello"文本，高度极小，渐变仅在该高度范围内渲染，超出区域会重复显示渐变

解决方法 #

给.body-page类添加以下关键属性即可解决：

修改后的CSS代码 #

.body-page{
    background: linear-gradient(blue, red);
    min-height: 100vh;
    margin: 0; /* 可选：移除body默认外边距，避免出现不必要的滚动条 */
}

属性说明 #

• background简写属性：替代单独的background-image，会自动将background-repeat设置为no-repeat，同时整合渐变设置
• min-height: 100vh：强制让<body>元素的最小高度等于视口高度，确保渐变铺满整个屏幕，不受内容多少影响
• margin: 0：清除浏览器默认给<body>添加的外边距，避免页面出现横向或纵向滚动条，优化视觉效果

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