background-size: cover 默认居中裁剪可能切掉主体，需用 background-position 精确控制裁剪区域；支持关键词、百分比或像素值；不同设备用媒体查询调整；固定宽高比需配合 padding-bottom 和 overflow: hidden；background-attachment: fixed 会破坏百分比定位。
background-size: cover 为什么裁不中你想要的区域
默认用 background-size: cover + background-position: center center，图片确实会等比缩放并填满容器，但“中心裁剪”只保证构图居中，不保证人物/主体在画面里——比如一张人像图，头在上半部分，center center 就可能把脸切掉。
真正可控的裁剪，靠的是 background-position 的具体偏移值。它接受关键词（top、left）、百分比（20% 30%）或像素（10px -50px），本质是定义“图片哪个点对齐容器的哪个点”。
-
background-position: 50% 50%等价于center center，以图中心对齐容器中心 -
background-position: 50% 20%表示图片垂直方向上 20% 的位置（即离顶部 20% 处）对齐容器顶部边缘，相当于把图往上提，露出更多下部 -
background-position: left top把图左上角钉在容器左上角，适合想保留左上角 logo 或文字的场景
不同设备需要不同裁剪焦点，怎么写媒体查询
手机竖屏时，用户视线集中在屏幕中部偏下；桌面横屏时，视线更居中。同一张背景图，在小屏上可能需要把主体往下压一点，避免被状态栏或输入法遮挡。
直接覆盖 background-position 即可，无需重复写其他 background 属性：
div.hero {
background-image: url(/img/hero.jpg);
background-size: cover;
background-position: 50% 40%; /* 桌面默认：主体略偏上 */
}
<p>@media (max-width: 768px) {
div.hero {
background-position: 50% 60%; /<em> 手机：把主体往下挪，避开顶部系统栏 </em>/
}
}</p>
注意：background-size 不用在媒体查询里重复声明，除非你要换 contain 或固定尺寸。
用 padding-bottom 实现固定宽高比容器再裁剪
如果背景图必须严格按 16:9、4:3 或 1:1 显示（比如卡片式布局），光靠 background-size: cover 不够——容器本身高度会随内容或视口变化，导致裁剪区域飘忽。
用 padding-bottom 配合 position: relative 锁定容器比例：
.aspect-ratio-16x9 {
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 9 ÷ 16 = 0.5625 */
position: relative;
overflow: hidden;
background-image: url(/img/cover.jpg);
background-size: cover;
background-position: 50% 30%;
}
关键点：
-
height: 0+padding-bottom百分比，让高度由宽度决定，不受内容影响 -
overflow: hidden必须加，否则裁剪失效 - 内部内容（如文字）需用
position: absolute定位，否则会被 padding 推开
background-attachment: fixed 会干扰裁剪定位
加了 background-attachment: fixed 做视差效果时，background-position 的百分比值会失效——它不再相对于容器，而是相对于整个视口。结果就是：滚动时，你设的 50% 40% 变成“图片上 40% 的位置始终对齐视口顶部”，而不是容器顶部。
解决方法只有两个：
- 放弃
fixed，改用纯 CSS 动画或 JS 模拟轻量视差 - 改用像素值定位，比如
background-position: 0 -100px，但失去响应性，需配合 JS 动态计算
多数情况下，优先砍掉 fixed ——它在移动端兼容性差，且和现代滚动优化（如 scroll-behavior: smooth）容易冲突。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
