背景图重复显示是因 background-repeat 默认为 repeat，应改为 no-repeat 等值；需检查 CSS 简写覆盖、元素尺寸匹配、多层背景叠加及优先级冲突，并用开发者工具验证。
如果您将 PSD 设计稿切图后生成 HTML5 页面，发现背景图在网页中重复显示，通常是由于 CSS 中 background-repeat 属性默认值导致。以下是修改背景图平铺行为的具体操作步骤：
一、修改 CSS 中的 background-repeat 属性
background-repeat 控制背景图像是否及如何重复。默认值为 repeat，会使图像在水平和垂直方向均平铺。需将其更改为不重复或单向重复模式。
1、打开 HTML 文件关联的 CSS 样式表（如 style.css）或
2、定位到设置背景图的 CSS 选择器，例如 body、.header 或自定义类名。
立即学习 “ 前端免费学习笔记（深入）”；
3、在该选择器的声明块中，查找 background 或 background-image 相关语句。
4、添加或修改 background-repeat 属性，可选值包括：no-repeat（完全不重复）、repeat-x（仅水平重复）、repeat-y（仅垂直重复）。
5、保存 CSS 文件并刷新网页验证效果。
二、使用复合 background 简写属性重置
CSS background 简写属性可一次性定义多个背景相关特性，若单独设置 repeat 未生效，可能是被简写规则覆盖，需统一声明。
1、确认当前背景定义是否使用了 background 简写，例如 background: url(img/bg.jpg) #fff;
2、将该行替换为完整简写形式，明确包含 repeat 参数，例如：background: url(img/bg.jpg) no-repeat center top / cover #fff;
3、其中 no-repeat 即指定不重复，center top 为定位，/ cover 为尺寸缩放，#fff 为备用背景色。
4、确保路径 img/bg.jpg 正确指向切图后的背景图文件。
三、检查 HTML 元素尺寸与背景图尺寸匹配关系
当容器宽高远大于背景图原始尺寸且 repeat 被禁用时，可能出现空白区域。此时需配合 background-size 与 background-position 精确控制显示范围。
1、在对应 CSS 选择器中添加 background-size 属性，常用值为cover（等比缩放填满容器）或contain（等比缩放完整显示全图）。
2、添加 background-position 属性，例如 center center 使图像居中对齐，或使用像素值如 0 0 固定左上角。
3、若需背景图随内容区拉伸变形显示，可设 background-size 为100% 100%，但注意可能失真。
4、删除所有影响盒模型的 margin、padding 异常值，防止容器尺寸意外扩大引发视觉错觉。
四、验证 HTML 结构中是否存在多层背景叠加
部分 PSD 切图流程会为不同 div 分别设置背景图，若父容器与子容器均含背景且未关闭重复，视觉上易误判为同一图层重复。
1、在浏览器中右键网页→“检查”打开开发者工具，切换至 Elements 面板。
2、逐级悬停查看各层级元素的 Computed 标签页中 background-image 和 background-repeat 实际计算值。
3、定位到真正触发重复渲染的元素，而非其父级或子级。
4、对该元素单独设置 background-repeat: no-repeat 并观察变化。
五、排除 CSS 优先级与继承干扰
外部样式表、内联样式或更高权重选择器可能覆盖本地 repeat 设置，导致修改无效。
1、在开发者工具的 Styles 面板中，查看目标元素的 background-repeat 属性旁是否有删除线，有则表示被覆盖。
2、尝试在该属性后添加 !important 临时验证，例如：background-repeat: no-repeat !important;
3、若加！important 后生效，说明存在优先级冲突，需调整选择器 specificity 或移动样式位置。
4、检查是否引入了重置 CSS（如 normalize.css）或 UI 框架（如 Bootstrap），其全局 background 规则可能产生影响。
