background-position没效果最常因前置条件缺失：background-image路径404、父容器无高度、简写background漏参数、优先级被覆盖或未设no-repeat；它本质是点对点对齐而非移动图片。

background-position 不是“移动图片”，而是指定图片上某一点与容器上某一点对齐。写错、路径 404、父容器没高度、background-image 没生效，都会导致它看起来“没反应”。

为什么 background-position 写了却没效果？

最常被忽略的不是语法，而是前置条件缺失：

• background-image 路径错误或返回 404 → 整个背景声明被浏览器静默忽略（检查 Network 面板）
• 父容器没设 height 或 min-height → 背景区域实际为 0px 高（空 div 尤其明显）
• body 默认有 margin: 8px → 真实可视区域比视口小一圈，加 body { margin: 0; } 再试
• 用了简写 background 却漏掉位置参数，例如 background: url(bg.jpg) no-repeat; → 会把 background-position 重置为 0% 0%
• CSS 优先级被更高权重规则覆盖（比如框架重置样式），用开发者工具看 Computed 值确认是否生效

background-position 支持哪几种写法？

三种主流写法可混用，但必须提供两个值（水平 + 垂直），除非只用单关键字（如 center）：

• 关键字组合：top left、center bottom、right 20px（水平用关键字，垂直用长度）
• 百分比：50% 50% 表示“图片宽高各 50% 处的点”与“容器宽高各 50% 处的点”对齐（即居中）；0% 0% 是左上角对齐；100% 100% 是右下角对齐
• 像素值：20px 30px 表示“图片上距左 20px、距顶 30px 的那个点”对齐容器左上角；负值合法，-10px -10px 表示图片往左上拉，露出更多右下部分

混合单位完全合法：background-position: 20px 50%; 是常用微调写法。

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

background-size: cover 下 background-position 怎么调才有效？

这是最容易误解的点：cover 会让图片等比缩放至完全覆盖容器，此时 background-position 调整的不是原图位置，而是“缩放后图像的裁剪窗口”在容器中的锚点。

• background-position: 50% 50% → 缩放后图像中心对齐容器中心（默认居中）
• background-position: 70% 30% → 容器宽 70% 处的垂直线，与缩放后图像宽 70% 处的垂直线对齐（适合让人脸始终出现在右上区域）
• 想稳定露出某个局部（比如 LOGO 或人脸），cover + background-position 是首选；100% 100% 会强行拉伸，严重失真

单独改 background-position 无效时，先确认是否用了 cover 或 contain —— 它们改变了定位基准。

怎么让背景图固定在页面底部不随滚动动？

“固定在页面底部” ≠ “固定在视口底部”。关键看你要的是视觉底部（内容区最下方）还是屏幕底部（滚动时也贴底）：

• 要贴内容区底部（推荐）：用 footer 元素，设固定高度 + background-position: center bottom; + background-size: cover;
• 要纯视觉装饰、不改 HTML 结构：用 body::after 伪元素，position: absolute; bottom: 0; + z-index: -1 防遮挡
• 要真正锁死在浏览器窗口最底端（哪怕页面很短）：用 position: fixed; bottom: 0;，并加 pointer-events: none; 避免拦截点击

所有方案都必须配合 background-image 和显式 background-repeat: no-repeat;，否则可能意外平铺或失效。