设置背景图片缩放，使用background-size属性

本文深入解析了CSS中background-size属性（尤其是cover值）的常见失效原因与正确用法，指出“未铺满”并非cover本身失效，而是因容器缺乏足够高度（需配合min-height: 100vh等关键声明）、背景图缺失或重复设置不当所致；文章强调必须同时满足background-image、background-size、background-repeat: no-repeat和足够容器高度这四个硬性条件，才能让cover真正实现全屏覆盖，还对比了cover、contain和100% 100%的本质差异与适用场景，并提醒开发者关注移动端兼容性、图片比例影响及设计协同等易被忽视却决定成败的实战细节。

background-size 不是 STYLE 属性，它是 CSS 属性，必须写在 style 属性值里（内联）或独立 CSS 规则中。单独写 background-size 在 HTML 的 style 里会失效——因为没图、没定位、没禁重复，浏览器直接忽略。

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

根本不是 cover 失效，而是它只缩放图片，不撑开容器。如果目标元素高度为 auto 或未设最小高度，cover 就只能在一个几像素高的区域里缩放，结果只剩顶部一条色带。

• 必须加 min-height: 100vh（比 height: 100vh 更安全，内容超长时不截断）
• 若用在 ，要同步设 html, body { height: 100%; margin: 0; }，否则百分比/视口单位无计算基准
• Flex 容器中检查 align-items：默认 flex-start 会让背景元素“吸顶”，显式写 align-items: stretch 才能撑高

内联 style 中 background-size 生效的硬性条件

单写 style="background-size: cover" 永远无效。必须一次性配齐以下四点，缺一不可：

• background-image: url('bg.jpg')（路径必须加引号，url(bg.jpg) 在多数浏览器中解析失败）
• background-size: cover
• background-repeat: no-repeat（否则小图会被平铺，和 cover 冲突）
• min-height: 100vh（关键！移动端尤其容易漏）

别用复合写法 background: url() no-repeat center / cover —— 斜杠后值易被解析错误，cover 可能被重置为 auto。

cover、contain、100% 100% 到底怎么选

三者行为完全不同，选错就是目标错位：

• cover：等比缩放，填满容器 → 可能裁剪，**不拉伸**；适合全屏 Hero 区、封面图
• contain：等比缩放，完整显示 → 必然留白，**不拉伸**；适合 logo、示意图、需保留全部信息的图
• 100% 100%：强制拉宽又拉高 → **一定拉伸变形**，除非图片和容器比例完全一致；仅适用于无比例要求的装饰性图案

想「完整显示 + 铺满无留白」？数学上不可能。二者互斥，强行兼顾只会让设计师反复改图或前端加 hack。

容易被忽略的兼容与性能细节

cover 和 contain 是原生支持，所有现代浏览器（IE9+）都 OK，无额外渲染开销。但注意两个隐性坑：

• background-attachment: fixed 在 iOS Safari 和部分安卓 WebView 中常触发重绘异常，出现撕裂、闪烁或定位偏移；有 transform 层级时更不可靠
• 图片原始比例影响最终效果：竖图配横屏视口，cover 必然裁上下；横图配窄容器，必然裁左右——这不是 bug，是预期行为

真正难的不是写对 background-size，而是判断该用哪个值，并提前和设计对齐「可裁剪范围」和「留白容忍度」。

好了，本文到此结束，带大家了解了《设置背景图片缩放，使用background-size属性》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！