CSS线性渐变重复显示问题求助及环境说明

核心CSS修复方案 #

你的背景渐变重复是因为CSS默认会对背景进行平铺，即使设置了background-size: cover，仍可能因容器高度不足或渐变尺寸计算问题出现重复。直接修改body的CSS规则即可解决：

body {
    background: linear-gradient(#D077E8, #01536C);
    background-size: cover;
    background-repeat: no-repeat; /* 强制禁止背景重复平铺 */
    min-height: 100vh; /* 确保body至少占满浏览器视口高度 */
    user-select: none;
    overflow: hidden;
}

修复逻辑说明 #

• background-repeat: no-repeat：彻底关闭背景的重复平铺行为，从根源解决重复问题。
• min-height: 100vh：保证body高度至少等于当前浏览器视口高度，避免页面内容高度不足时，渐变背景因高度不够触发重复。

部署环境额外排查点（针对Express+EJS+Nginx） #

虽然问题本质是CSS，但结合你的部署栈，可快速检查以下内容确保修复生效：

• 清除静态资源缓存：若修改CSS后无效果，可在Nginx配置中添加静态资源缓存控制规则，或在CSS文件路径后追加版本号（如style.css?v=1.1）强制浏览器加载最新文件。
• 验证EJS模板路径：确认页面中link标签的CSS文件路径正确，未加载旧版本的CSS资源。
• 兼容旧浏览器：针对部分不支持vh单位的旧浏览器，可补充如下规则：

html, body {
    height: 100%;
    margin: 0;
}

内容的提问来源于stack exchange，提问作者Marc-Anthony