background-size 不是“设了就满屏”，它必须配合容器尺寸、定位方式和重复行为一起看，否则图像会消失、拉伸、裁剪或留白；尤其在 body 或 html 上直接使用时，90% 的问题出在父容器没显式宽高或盒模型干扰。
background-size 不是“设了就满屏”，它必须配合容器尺寸、定位方式和重复行为一起看，否则图像会消失、拉伸、裁剪或留白——尤其在 body 或 html 上直接使用时，90% 的问题出在父容器没显式宽高或盒模型干扰。
为什么 background-size: cover 在 body 上经常不生效
因为 body 默认高度由内容撑开，不是视口高度；cover 按容器实际尺寸缩放，如果容器高度只有 20px，图像就只缩到 20px 高，根本不会铺满屏幕。
- 必须给
html和body同时设height: 100vh（不是100%），否则100%会回退为内容高度 -
margin: 0和padding: 0也要清掉，浏览器默认body有 8px 外边距，会导致背景边缘露白 - 若用
background-attachment: fixed，需确认是否真需要视差效果——它会让背景脱离文档流，某些滚动场景下反而错位
cover / contain / 100% 100% 的实际表现差异
三者不是“选一个就好”，而是对应完全不同的视觉目标和风险点：
-
cover：图像等比缩放至**完全覆盖容器**，可能裁边。适合全屏 Banner，但关键人物/文字在图边缘时会被切掉 -
contain：图像等比缩放至**完整可见**，容器内留白。适合 Logo 或图标类背景，但留白位置不可控（上下 or 左右） -
100% 100%：强制拉伸，**宽高比丢失**。仅适用于纯纹理、渐变底图或已知图源比例严格匹配容器的场景
注意：cover 和 contain 都依赖 background-position 定位裁剪区域或留白方向，默认 center，但可改成 top left 或 bottom right 主动控制。
background-size 值写成 200px 300px 时的隐藏限制
这个写法看似直观，但实际生效前提是容器本身有明确宽高；如果容器是 display: inline 或浮动后塌陷，值会被忽略。
- 像素值只对**块级容器**可靠，
div、section可用，span必须先加display: inline-block - 百分比值（如
80% 60%）是相对于容器内容区（content box）计算，不是 padding box；若用了box-sizing: border-box，要意识到 padding 会压缩图像可用空间 - 旧版 Safari（-webkit-background-size 前缀，仅靠标准属性会回退为默认平铺
用 background 复合属性时斜杠顺序不能错
background 一行写完很简洁，但 background-position 和 background-size 必须用 / 分隔，且顺序固定：位置在前、尺寸在后。
- ✅ 正确：
background: url(bg.jpg) no-repeat center/cover; - ❌ 错误：
background: url(bg.jpg) no-repeat cover/center;（浏览器直接忽略整条声明） - ⚠️ 注意：斜杠前后不能有空格，
center / cover是无效语法
复合写法省代码，但调试困难——某个子属性失效时，很难定位是哪个值错了。线上环境建议优先拆开写，开发期再合并。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
