怎么设置背景图片html不重复_怎么设置背景图片html全屏【技巧】

background-image 怎么不重复铺满整个页面

直接用 background-repeat: no-repeat 只能停在元素默认尺寸里，不是“不重复”，而是“不重复但也不撑开”——你看到的空白，其实是 高度没填满视口导致的。

关键不是关掉重复，而是让背景图「覆盖全屏」且「只显示一次」：

• background-size: cover：等比缩放填满容器，可能裁剪边缘
• background-attachment: fixed（可选）：滚动时背景不动，增强全屏感
• 必须确保 和 高度为 100%，否则背景图只画在内容高度范围内

常见错误是只设了 body，漏了 html：

html, body {   height: 100%;   margin: 0; } body {   background-image: url("bg.jpg");   background-repeat: no-repeat;   background-size: cover;   background-position: center; }

为什么 background-size: 100% 100% 不推荐

它会强行拉伸图片填满，彻底破坏宽高比，人像变形、文字模糊，尤其在响应式场景下更明显。

立即学习“前端免费学习笔记（深入）”；

cover 和 contain 是语义明确的缩放策略，浏览器原生支持，性能好、兼容性稳（IE9+）。

• cover：优先保证填满，允许裁剪
• contain：优先保证完整，允许留白
• 100% 100%：无脑拉伸，没有语义，后期维护难判断意图

移动端全屏背景图经常被截断？检查 viewport 和 overflow

iOS safari 和部分安卓 webview 会把 当作“可滚动区域”，哪怕内容很少，也会产生隐式滚动条，导致背景图错位或底部露白。

• 加 viewport 元标签：<meta name="viewport" content="width=device-width, initial-scale=1.0">
• 禁用多余滚动：body { overflow-x: hidden; }（慎用 overflow-y: hidden，会锁死页面滚动）
• 避免给 body 设固定 height，改用 min-height: 100vh 更稳妥

background-image 加载失败时怎么兜底

网络慢、路径错、CORS 限制都可能导致背景图白屏。纯 CSS 没法捕获加载失败，但可以靠叠加色值和降级策略减少突兀感：

• 先设一个安全背景色：background-color: #2c3e50，再叠图片
• 用 background-image 多值语法，后写的会盖在前面（但注意兼容性，IE 不支持）：background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("bg.jpg")
• 真正要监控加载状态，得用 js + Image 对象，但那是另一层复杂度了

全屏背景图看着简单，实际卡点都在高度继承、缩放语义、移动端视口行为这些细节上，调的时候别只盯着 background-* 属性本身。