最直白方案是 background-position: right 29px bottom 28px，语义清晰；老浏览器需降级为 background-position: right bottom；注意 background-origin 默认为 padding-box，实际距容器边缘为偏移量加 padding。
直接用 background-position: right 29px bottom 28px 就行，现代浏览器全支持，不需要额外包裹、伪元素或 JS。
background-position 四值语法：right X bottom Y
这是最直白的方案，语义清晰，写法自然。它明确告诉浏览器：“把图片的右边缘往左偏移 29px，下边缘往上偏移 28px”。
- 必须按“方向 + 长度”成对出现，
right 29px和bottom 28px顺序可互换，但不能写成right bottom 29px 28px - 不支持该语法的老浏览器（如 IE11 及更早）会忽略整条声明，回退到默认左上角；加个
background-position: right bottom做降级即可 - 该偏移始终基于
background-origin指定的盒模型，默认是padding-box，所以实际距离容器右/下边缘的间距 = 偏移量 + 对应方向的 padding
background-origin 设为 content-box 配合 padding
如果你已知容器的 padding-right 和 padding-bottom 值（比如都是 29px / 28px），那可以不用四值语法，改用更兼容的方式：
- 设置
background-origin: content-box，让背景定位基准从 padding 区外沿变成内容区外沿 - 再设
background-position: right bottom，此时图片右下角就自动对齐到内容区右下角，也就是离容器右/下边缘刚好等于 padding 值 - 这个方案在 IE9+ 都可用，但前提是 padding 值固定且已知；动态 padding（如用
rem或媒体查询变更）会导致偏移失效
calc() 计算百分比偏移：兼容性折中方案
当需要精确像素偏移，又得照顾部分旧环境（如某些安卓 WebView）时，calc() 是稳妥选择：
-
background-position: calc(100% - 29px) calc(100% - 28px)表示“从右边缘往左 29px，从下边缘往上 28px” - 注意：百分比计算基于容器尺寸，不是图片尺寸；如果容器宽高不定（如 flex 项未设宽高），结果可能意外
- IE9+ 支持
calc()，但早期版本不支持在background-position中使用；iOS Safari 6.1+、Chrome 26+、Firefox 16+ 均无问题
真正容易被忽略的是 background-origin 的默认行为——它让很多开发者误以为 right 29px 是“离容器右边缘 29px”，其实默认是离 padding box 右边缘 29px，最终视觉距离 = 29px + padding-right。动手前先确认你控制的是哪个盒模型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
