如果您需要在 CSS 中将 background-image 定位到左侧 20px 和顶部 10px 的位置，这很容易。您可以使用 background-position: 20px 10px;。但是，如果您想将其定位到右侧 20px 和底部 10px 的位置呢？
我们也假设我们不知道元素的确切宽度和高度，这很可能，因为流式布局和动态内容。如果我们知道，我们可以简单地进行一些草稿计算并使用正常的 background-position 语法。
正如人们所说，这是一个完全合理的请求。以下是一些解决方法。
background-position 的四值语法
这是最简单的方法。您可以将 长度值 与任何 top/right/bottom/left 关键字（而非 center）结合使用。因此，对于我们的示例
background-position: right 20px bottom 10px;使用此方法，您可以从元素的任意四个角偏移 background-image。
浏览器支持，根据 MDN：Chrome 25+、Firefox 13+、IE 9+、Opera 10.5+、Safari/iOS 7+。最大的风险是 Android。
我测试了 Android 4.0、4.1 和 4.2，但它不起作用。但 Android 4.4 支持它。
使用 calc()
您可以继续使用 background-position 的双值语法，但使用通过 calc() 创建的长度。例如
background-position: calc(100% - 20px) calc(100% - 10px); 浏览器支持略好一些，Chrome 回到 19+，Firefox 回到 4+，Safari 回到 6+（全部带前缀）。
Android 原生浏览器与上述四值语法具有相同的支持。
使用 JavaScript
如果您需要完美的浏览器支持，我想唯一的方法是 JavaScript。测量元素的高度/宽度，了解 background-image 的大小，然后根据需要调整 CSS。
使用 jQuery
var el = $(".example"),
bgWidth = 20,
bgHeight = 20;
el.css({
"background-position": (el.width()-bgWidth+10) + "px " + (el.height()-bgHeight-10) + "px"
});演示
以下列出了三种方法
如果您使用 calc() 背景位置，IE9 将崩溃。我自己也遇到了这种情况。
是的，我的 IE9 也崩溃了，但是当我尝试在 IE6 中使用向后兼容性设置时，它出人意料地完美运行了！您运行的是哪个版本的 IE9？
好吧，我承认我不知道
background-position属性上的 4 个值。很高兴知道。并且过去使用背景图像的
calc存在问题。IE9 或多或少是对此的唯一提醒。所以基本上解决此问题的唯一方法是添加一个容器元素和一个用于背景的单独元素。顺便说一句，这三种解决方案都不能在 Android 4.3 上运行。或者正确的解决方案应该是半星级
半星级是正确的。
或者切片图像。不理想……但有效！
这些方法可以很好地设置背景图像的偏移量，但由于浏览器支持不佳，我不会使用它。通常我会以包含空格的方式切片图像。另一种方法是绝对定位一个元素并在该元素上设置背景，但这太麻烦了。
我还听说过一个非常好的解决方案，即为具有背景的元素设置透明边框。例如，如果我们希望背景位于右侧但偏移 10px，我们可以为该元素设置 border-right: 10px solid transparent。
请注意，透明边框不一定是透明的——不是因为旧浏览器，而是因为用户的辅助功能选项。
当用户禁用作者颜色或应用高对比度主题（所有浏览器都可以这样做）时，透明边框将采用前景颜色。因此，在此示例中，他们将看到元素右侧有一条粗边框。
如果文本与该区域重叠，那么这将是一个严重的辅助功能问题。
但如果不是这种情况（更可能），那么这不是问题，但可能也不是您想要的效果。最终可能无关紧要，但值得注意。
但是您可以利用此技巧。例如，如果某个区域使用背景进行阴影处理以使其在视觉上与周围内容区分开来，那么该阴影及其产生的视觉效果在高对比度视图中会丢失。但是，如果整个元素都有 1px 透明边框，则边框将变得可见并重新创建类似的效果 :-)
像这样使用四值语法并回退到 calc() 是否安全？
不。如果我没记错的话（可能是 IE8），IE9 在
background-position中使用 calc() 时会崩溃。如果将图像旋转 180 度呢？浏览器支持可能也不好，但也许左上角可以工作？
还没试过，可能圣诞节太忙了，脑子转不过来了
很棒的文章，
这些天我真的很喜欢玩 CSS
谢谢，继续写作，继续帮助 :)
我喜欢你所有的技巧，但如果你能告诉我为什么我可能需要做一些像偏移背景图像这样的事情，那会是什么额外的“东西”。也许一些实际的例子可以让我想到“哦，是的”或者帮助我与我认为可以使用它的人分享它。
哦！这很简单，但可以节省很多麻烦。
非常感谢 Chris！我完全忘记了四值语法。
对我来说，这真的是一个很棒的教程。四值语法对我来说是全新的。感谢您的帖子。
该死！在
background-position属性上使用 4 个值确实很有用。谢谢！这让我们所有的前端开发人员都感到不寒而栗，但从右侧偏移背景图像的另一种方法是在图像编辑器中向实际图像添加所需的填充，并将“right”指定为水平位置。希望下一个 CSS 规范允许像当前规范对左和顶那样明确地指定右和底位置……非常有兴趣知道为什么它还没有实现。
如果你使用了响应式设计，JS 解决方案需要主动检测窗口大小调整或方向变化（某些设备/浏览器组合在方向变化时会改变视口宽度，可以使用 http://www.matanich.com/test/viewport-width/ 进行测试）。我网站上有时会使用图标来表示“是”和“否”，所以我通常将它们放在单独的文件中，甚至将它们编码到 CSS 中（因为它们会出现在很多页面上，并且需要加载——为什么不和 CSS 文件一起加载呢）。如果我确实需要从雪碧图加载背景，或者如果我需要从右侧留出百分比的填充（我在响应式设计中经常这样做），那么我就会把它放在 :before 或 :after 中——如果可以用伪元素实现，谁会想要一个真正的元素呢？
我试图想象一下这里的用例，但我可能会使用内部元素或更大的图片。我很少遇到可以添加自定义 CSS 但不能添加标记的情况。