使用 background-size 属性可实现背景图像动态缩放：cover 保持比例全覆盖但可能裁剪；100% 100% 强制拉伸易变形；contain 完整显示留空白；媒体查询适配多端；CSS 变量支持动态控制。
如果您在使用 HTML5 开发网页时希望让背景图像随容器尺寸动态缩放并完全覆盖整个背景区域，则需要借助 CSS 的 background-size 属性进行精确控制。以下是实现背景图像缩放铺满的多种方法：
一、使用 background-size: cover
该值使背景图像保持原始宽高比，同时缩放至完全覆盖容器的最小尺寸，可能造成图像部分被裁剪。
1、在 CSS 样式中为元素设置背景图像路径。
2、添加声明 background-size: cover;
3、确保同时设置 background-repeat: no-repeat; 以避免重复平铺。
4、可选地添加 background-position: center; 使图像居中对齐。
二、使用 background-size: 100% 100%
该写法强制拉伸背景图像以完全填充容器宽高，不保持原始宽高比，可能导致图像变形。
1、为需要设置背景的 HTML 元素编写 CSS 类或内联样式。
2、指定背景图路径，例如 background-image: url('bg.jpg');
3、设置 background-size: 100% 100%;
4、添加 background-attachment: scroll; 保证滚动时背景随内容移动。
三、使用 background-size: contain
该值使背景图像在保持宽高比的前提下完整显示于容器内，可能在容器中留有空白区域。
1、为容器元素定义背景图像源。
2、应用 background-size: contain;
3、配合 background-origin: padding-box; 确保尺寸计算基于内边距区域。
4、设置 background-color: #f0f0f0; 作为备用底色，防止空白区域显白。
四、响应式组合写法（媒体查询适配）
针对不同视口宽度切换缩放策略，提升多设备兼容性。
1、基础样式中设定 background-size: cover; 作为默认行为。
2、在 @media 查询中，当屏幕宽度小于 768px 时，改用 background-size: 100% auto;
3、添加 background-position: top center; 避免关键内容被顶部裁切。
4、为移动端禁用背景固定效果：background-attachment: scroll;
五、使用 CSS 自定义属性动态控制
通过 CSS 变量统一管理缩放参数，便于后期维护与主题切换。
1、在 :root 中定义变量：--bg-scale: cover;
2、在目标选择器中引用：background-size: var(--bg-scale);
3、通过 JavaScript 修改根变量值：document.documentElement.style.setProperty('--bg-scale', '100% 100%');
4、确保所有相关背景元素均使用同一变量，实现批量同
步更新。
