如何用CSS实现响应式背景图片全屏覆盖？-css教程-PHP中文网

background-size: cover需配合min-height: 100vh、background-position: center center、background-repeat: no-repeat四者缺一不可；失效主因是容器无高度，如body空内容、flex塌陷或未设html/body高度。

如何用css实现响应式背景图片全屏覆盖？

直接说结论：用 background-size: cover + min-height: 100vh + background-position: center center + background-repeat: no-repeat 四件套，缺一不可。

为什么 `background-size: cover` 看起来没铺满？

不是属性失效，是容器本身没高度。常见于：body 下空内容、div 没设高、或被 Bootstrap 的 .row/.col flex 布局塌陷。

min-height: 100vh 是底线，别用 height: 100vh —— iOS Safari 地址栏收放会动态改视口高度，导致背景跳动或截断
如果父容器是 display: flex，子元素必须显式设 min-height: 100% 或 flex: 1，否则 flex 容器默认不撑高
background-attachment: fixed 会加剧 Safari 滚动卡顿，且在部分安卓 WebView 中表现异常，非必要不加

`cover` 和 `100% 100%` 到底该选哪个？

cover 等比缩放后裁边；100% 100% 强制拉伸，必然失真。选哪个取决于设计需求：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

Banner 类全屏图：优先 cover，但必须配 background-position: center center，否则人脸可能偏到左上角被切掉
信息图/示意图类：若关键内容占满整图（无留白），且允许轻微变形，background-size: 100% 100% 反而更可控
绝对不能混用：background-size: cover + background-position: top left = 关键内容大概率消失

移动端图片太大怎么办？

5MB 的 4K 图在 3G 网络下加载超 10 秒，但用媒体查询换图又容易漏写 background-repeat 导致重复平铺。

必须为每个断点重写完整背景声明，不能只覆盖 background-image：

.hero-bg {
  background-image: url('bg-mobile.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .hero-bg {
    background-image: url('bg-tablet.jpg');
  }
}
@media (min-width: 992px) {
  .hero-bg {
    background-image: url('bg-desktop.jpg');
  }
}

路径必须加引号，url(bg.jpg) 在某些旧版 Safari 里会解析失败

别依赖 d-none d-md-block 控制背景图——它删的是整个 DOM 节点，不是换图

真正难的不是写对这四行 CSS，而是图片本身宽高比是否接近 16:9 或 4:3；再好的 cover 也救不了竖构图人像塞进横屏 banner 里——这时候得靠设计师提前裁好，而不是前端硬扛。