一个简单但肮脏的技巧是简单地添加你想要作为背景的图像的偏移量。它是不可维护的，但它可以完成工作。

background-position: calc(100% - 8px);

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

background-position: 100% 0px;

我发现这个CSS3特性很有用:

/* to position the element 10px from the right */
background-position: right 10px top;

据我所知，IE8不支持这个功能。在最新的Chrome/Firefox中，它工作得很好。

有关受支持的浏览器的详细信息，请参阅我是否可以使用。

使用来源:http://tanalin.com/en/blog/2011/09/css3-background-position/

更新:

现在所有主流浏览器都支持该功能，包括移动浏览器。

这将适用于大多数现代浏览器…除了IE(浏览器支持)。尽管该页面列出了支持>= IE9，但我的测试并不同意这一点。

你可以像这样使用calc() css3属性;

.class_name {
    background-position: calc(100% - 10px) 50%;
}

对我来说，这是最干净、最合乎逻辑的方式来实现向右的边缘。我还使用了border-right: 10px solid transparent;IE。

如果你想使用这个添加箭头/其他图标到一个按钮，那么你可以使用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