精准控制 background-position 应用像素值或百分比，参考点为容器左上角；background-repeat 需设为 no-repeat 才能实现单图精确定位，且渲染顺序为先定位首图再平铺。
background-position 值怎么写才精准控制图片位置
直接写像素值或百分比最可控，但要注意「参考点」是容器左上角，不是图片本身。比如 background-position: 20px 30px 表示图片左上角向右偏移 20px、向下偏移 30px；而 background-position: right bottom 是让图片右下角对齐容器右下角。
常见误区是以为 background-position: 50% 50% 总是居中——它确实让图片的 50% 位置对齐容器的 50% 位置，但前提是图片尺寸 ≤ 容器；如果图片超大，结果可能是只显示右下角一块。
- 用关键词（
top/center/bottom+left/center/right）适合语义化布局，如background-position: top right - 混合写法更灵活，例如
background-position: right 10px bottom 5px（CSS Level 4，现代浏览器支持，IE 不支持） - 避免只写一个值，如
background-position: 20px，它等价于20px 50%，容易误判垂直位置
background-repeat 怎么防止图片平铺又保留定位效果
默认 background-repeat: repeat 会把图片无限铺满整个背景区域，一旦设了 background-position，往往只是“第一张图”的位置变了，后面重复的图依然按原始起点平铺——这不是你想要的“整体偏移”效果。
真正要的是：只显示一张图，并按指定位置摆放。这时必须显式关闭重复：
立即学习“前端免费学习笔记（深入）”；
background-image: url(logo.png); background-position: center top; background-repeat: no-repeat;
其他有用组合：
-
repeat-x：仅水平平铺，适合做横条状装饰，background-position控制起始纵坐标（如bottom让横条贴底） -
repeat-y：仅垂直平铺，配合background-position: left center可做左侧竖线边框 -
space或round（较新，兼容性需查 CanIUse）：自动缩放图片以填满且不裁切，但会弱化background-position的精确控制
background-position 和 background-repeat 同时用时的渲染顺序影响
CSS 背景绘制是“先定位，再重复”，也就是说：background-position 决定的是**首张背景图的起始位置**，然后所有重复单元都基于这个偏移后的起点继续平铺。
举个反直觉例子：
background-image: url(dot.png); /* 8×8 像素小点 */ background-position: 4px 4px; background-repeat: repeat;
结果不是整个背景整体右下偏移 4px，而是每个 8×8 的格子内，小点都出现在右下角（即从 (4,4) 开始画），视觉上像网格线偏移了。
- 想实现“整体位移+平铺”，得用
background-size配合大图，或改用伪元素 +transform - 使用
background-attachment: local时，滚动中background-position行为会变化，慎用于可滚动容器 - 多个背景图（逗号分隔）中，每个图的
position和repeat必须一一对应，顺序错一位就会错配
IE8 及更老浏览器里 background-position 的兼容写法
IE8 支持 background-position 关键词和像素值，但不支持百分比值与关键词混用（如 50% top），也不支持四值语法（right 10px bottom 5px）。
稳妥方案是降级为双数值或关键词组合：
- 居中顶部 → 用
center top，别写50% 0（IE8 对0解析不稳定） - 右偏移 20px、底偏移 10px → 改用固定宽高容器 +
right bottom，再用 padding 或 margin 模拟偏移 - 必须用像素精确定位时，确保父容器有明确
width和height，否则 IE8 下background-position: 20px 30px可能失效
至于 background-repeat，IE8 完全支持 no-repeat、repeat、repeat-x、repeat-y，无需降级。
老项目还在兼容 IE8 时，别依赖 background-position 的百分比计算逻辑，它在不同盒模型下表现不一致。真正需要像素级对齐的地方，优先考虑用 img 元素或 SVG。
