支持，background-position 允许 right/left/top/bottom 关键字与长度值混合使用（如 right 20px top 10px），属 css3 正式规范；ie9–10 不支持，需用百分比回退（如 100% 10px）。
background-position 支持 right/left/top/bottom 关键字组合吗？
支持，但仅限 CSS Level 3 及以上（现代浏览器全支持），background-position 现在允许混合使用关键字和偏移量，比如 right 20px top 10px。这不是“新语法”的噱头，而是 W3C 正式规范的一部分，本质是把「定位锚点 + 偏移」拆成两步表达。
常见错误是写成 right -20px —— 这会失效，因为 right 本身已定义锚点在右边缘，负值需显式配合单位写在后面：
background-position: right 20px top 10px;
等价于「从右侧起向左偏移 20px，从顶部起向下偏移 10px」。注意顺序无关，top 10px right 20px 效果相同。
为什么 background-position: right 20px 不总是如预期工作？
关键在于背景图尺寸是否超出容器。如果 background-size 是 contain 或 cover，或图片本身比容器小，right 20px 的行为会变得反直觉：它始终以「背景图的右边缘」为基准偏移，而不是容器右边缘。
真正按容器右边缘定位并偏移，必须确保背景图足够大（或用 background-size: 100% 100% 强制拉伸），否则偏移量实际作用在缩放/裁剪后的图上。
-
background-size: auto（默认）：图原始尺寸，right 20px基于图自身右缘 -
background-size: 100% 100%：图铺满容器，right 20px才真正从容器右缘向左退 20px -
background-repeat: no-repeat必须设，否则偏移会被重复覆盖
兼容性与 fallback 怎么处理老浏览器？
IE 9–10 不支持双值关键字语法（如 right 20px），只认两个值的旧式写法：background-position: 100% 0 表示右上角。想兼容 IE，得用百分比模拟偏移：
/* IE9+ & 现代浏览器 */ background-position: right 20px top 10px; /* IE8 及以下 fallback（可选） */ background-position: 100% 10px;
这里 100% 10px 表示「横向 100%（即右对齐），纵向 10px（距顶）」。但注意：100% 10px 的 10px 是相对于容器高度的 10px，而 right 20px top 10px 的 10px 是绝对像素——两者数值不能直接换算，需根据设计意图调整。
实际项目中容易漏掉的细节
最常被忽略的是 background-origin 默认值。它控制「偏移量从哪算起」：默认是 padding-box，意味着 right 20px 是从 padding 右边缘开始算，不是 content 或 border 边缘。
如果你的容器有 padding，且希望偏移严格贴着内容区右边界，得显式改 origin：
background-origin: content-box; background-position: right 20px top 10px;
另外，background-clip 不影响定位，但会影响视觉范围——即使图定位正确，若 background-clip: content-box 且 padding 存在，图可能被裁掉一部分。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
