17370845950

背景图重复问题可通过设置 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）。不复杂但容易忽略组合逻辑。