本文详解为何 background-image 在窗口缩小时无法撑满容器宽度，并提供基于 background-size: cover 的可靠解决方案，同时结合实际 SCSS 结构给出可复用的修复写法。
本文详解为何 `background-image` 在窗口缩小时无法撑满容器宽度，并提供基于 `background-size: cover` 的可靠解决方案，同时结合实际 scss 结构给出可复用的修复写法。
你遇到的问题非常典型：在使用 radial-gradient（或任何背景图）作为 section 背景时，当视口宽度缩小至约 950px 以下，背景不再“贴边延展”，而是向左偏移、露出右侧空白——这并非渲染错误，而是 CSS 背景默认行为所致。
根本原因在于：你当前使用的 background-size: 14px 14px 是固定尺寸重复平铺模式，它严格按像素单位重复绘制两个径向渐变图层。当容器宽度变化（尤其变窄）时，重复单元仍保持 14×14px，但因 background-position: 0 0, 7px 7px 的偏移设定，整体视觉上会呈现“错位感”或“未填满”的假象；更关键的是，该写法完全不包含响应式适配逻辑，自然无法随容器缩放自适应。
✅ 正确解法不是加 min-width 或强行设 width: 100%，而是升级背景渲染策略：
%background-light {
// ✅ 替换为响应式背景覆盖方案
background-color: $background-color2;
background-image:
radial-gradient($background-dot-color2 1px, transparent 1px),
radial-gradient($background-dot-color2 1px, transparent 1px);
background-size: 14px 14px; // 保留点阵密度
background-position: 0 0, 7px 7px;
// ? 关键：启用覆盖模式，确保背景始终充满容器
background-repeat: repeat;
background-attachment: scroll;
}
⚠️ 注意：background-size: cover 仅适用于单张图片背景（如 url(...)），对多层 radial-gradient 不适用，强行设置反而会破坏点阵效果。因此，真正有效的做法是——保持原有渐变定义，但确保容器本身具备可靠的响应式尺寸约束。
请检查并修正你的 %section 占位符：
%section {
padding: 2% 10% 5% 10%;
scroll-margin-top: 8vh;
min-height: 92vh;
width: 100%; // ✅ 正确：保证水平占满
// ? 补充关键声明，防止内部内容溢出导致容器收缩
box-sizing: border-box;
// ? 移除 height: auto（与 min-height 冲突且非必需）
}
同时，在全局样式中为 body 和 html 显式声明：
html, body {
width: 100%;
min-width: 100%;
overflow-x: hidden; // 防止意外横向滚动条
}
? 进阶建议：若未来需引入真实图片背景（如 background-image: url(./hero.jpg)），则应使用：
background-size: cover; background-position: center center; background-repeat: no-repeat;
总结：背景“不铺满”本质是尺寸控制逻辑缺失。对 CSS 渐变背景，重点在于保障父容器 width: 100% + box-sizing: border-box + 无干扰 margin/padding；对图片背景，则优先使用 cover + center 组合。无需 JS 干预，纯 CSS 即可稳健解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
