背景图重复问题可通过设置 background-repeat 和 background-size 解决：background-repeat: no-repeat 防止平铺，background-size: cover/contain 调整缩放适配。
背景图重复（即平铺）是 CSS 中很常见的问题，尤其当图片尺寸小于容器时，默认会横向纵向重复填充。解决的关键在于合理搭配 background-repeat 和 background-size
用 background-repeat 控制是否重复
这是最直接的控制方式：
-
不重复：
background-repeat: no-repeat;—— 图片只显示一次，通常居左上角 -
横向重复：
background-repeat: repeat-x; -
纵向重复：
background-repeat: repeat-y; -
完全重复（默认）：
background-repeat: repeat;
用 background-size 调整图片缩放与适配
即使设了 no-repeat，如果图片太小或太大，显示效果仍可能不理想。此时用 background-size 精确控制：
-
填满容器（可能裁剪）：
background-size: cover;—— 等比缩放，确保覆盖整个区域 -
完整显示（可能留白）：
background-size: contain;—— 等比缩放，确保图片全部可见 -
固定尺寸：
background-size: 200px 150px;或background-size: 100% 100%;（拉伸变形）
组合使用更稳妥
单独设置某一项往往不够，推荐写法示例：
立即学习“前端免费学习笔记（深入）”；
div {
background-image: url('bg.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center; /* 配合 cover 时建议加上，避免偏移 */
}如果希望图片居中、不重复、又刚好撑满且不变形，no-repeat + cover + center 是黄金组合。
注意 background-attachment 和层级干扰
有时看似“重复”，其实是其他原因：
- 父容器有默认 padding/margin，导致多个元素各自渲染背景，看起来像重复 —— 检查盒模型
- 用了
background-attachment: fixed;在滚动时可能产生错位假象 - 多个背景层（多背景语法）没写清楚每层的 repeat/size，造成叠加混乱
基本上就这些。核心就是：先决定要不要重复（repeat），再决定怎么缩放（size），最后微调位置（position）。不复杂但容易忽略组合逻辑。
