有一种方法来定位背景图像从其元素的右边一定数量的像素?
例如，要将某个东西从左边定位一定数量的像素(比如10)，我是这样做的:
#myElement {
background-position: 10px 0;
}
当前回答
这将适用于大多数现代浏览器…除了IE(浏览器支持)。尽管该页面列出了支持>= IE9，但我的测试并不同意这一点。
你可以像这样使用calc() css3属性;
.class_name {
background-position: calc(100% - 10px) 50%;
}
对我来说，这是最干净、最合乎逻辑的方式来实现向右的边缘。我还使用了border-right: 10px solid transparent;IE。
其他回答
最合适的答案是background-position的新四值语法，但在所有浏览器都支持它之前，最好的方法是按照以下顺序组合之前的响应:
background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */
我的问题是，当窗口调整大小时，我需要背景图像与右侧边界保持相同的距离，例如平板电脑/手机等 我的解决方案是像这样使用一个百分比:
background-position: 98% 6px;
它会固定在原地。
过时的答案:它现在在主要浏览器中实现，请参阅 这个问题还有其他答案。
CSS3修改了背景位置的规格，使它可以在不同的原点上工作。不幸的是，我找不到任何证据表明它已经在任何主流浏览器中实现。
http://www.w3.org/TR/css3-background/#the-background-position 参见例12。
background-position: right 3em bottom 10px;
一个简单但肮脏的技巧是简单地添加你想要作为背景的图像的偏移量。它是不可维护的，但它可以完成工作。
正如这里提出的，这是一个非常完美的跨浏览器解决方案:
background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;
我之所以使用它，是因为浏览器还不太支持CSS3的特性，即在标记为解决问题的答案中指定偏移量。如。
