我的问题是，当窗口调整大小时，我需要背景图像与右侧边界保持相同的距离，例如平板电脑/手机等 我的解决方案是像这样使用一个百分比:

background-position: 98% 6px;

它会固定在原地。

最简单的解决方案是使用百分比。这并不是您想要的答案，因为您要求的是像素精度，但如果您只是需要在右边缘和图像之间有一些填充，那么给出99%的位置通常就足够了。

代码:

/* aligns image to the vertical center and horizontal right of its container with a small amount of padding between the right edge */
div.middleleft {
  background: url("/images/source.jpg") 99% center no-repeat;
}

CSS3规范允许背景位置的不同来源现在在Firefox 14中得到支持，但在Chrome 21中仍然不支持(显然IE9部分支持它们，但我自己没有测试过)

除了@MattyF提到的Chrome问题之外，这里还有一个更简洁的总结: http://code.google.com/p/chromium/issues/detail?id=95085

如果你想使用这个添加箭头/其他图标到一个按钮，那么你可以使用css伪元素?

如果它真的是整个按钮的背景图像，我倾向于将间距合并到图像中，并使用

background-position: right 0;

但如果我必须添加一个设计的箭头到一个按钮，我倾向于有这样的html:

<a href="[url]" class="read-more">Read more</a>

并倾向于用CSS做以下事情:

.read-more{
    position: relative;
    padding: 6px 15px 6px 35px;//to create space on the right
    font-size: 13px;
    font-family: Arial;
}

.read-more:after{
    content: '';
    display: block;
    width: 10px;
    height: 15px;
    background-image: url('../images/btn-white-arrow-right.png');
    position: absolute;
    right: 12px;
    top: 10px;
}

通过使用:after选择器，我使用CSS添加了一个元素来包含这个小图标。您可以通过在a元素中添加span或<i>元素来实现同样的目的。但我认为这是一种向按钮添加图标的更简洁的方式，而且它是跨浏览器支持的。

你可以在这里查看小提琴: http://codepen.io/anon/pen/PNzYzZ

过时的答案:它现在在主要浏览器中实现，请参阅 这个问题还有其他答案。

CSS3修改了背景位置的规格，使它可以在不同的原点上工作。不幸的是，我找不到任何证据表明它已经在任何主流浏览器中实现。

http://www.w3.org/TR/css3-background/#the-background-position 参见例12。

background-position: right 3em bottom 10px;

是的!好吧，把背景图片从浏览器的右边定位成0px，而不是左边-我使用:

background-position: 100% 0px;