有一种方法来定位背景图像从其元素的右边一定数量的像素?
例如，要将某个东西从左边定位一定数量的像素(比如10)，我是这样做的:
#myElement {
background-position: 10px 0;
}
当前回答
我的问题是，当窗口调整大小时，我需要背景图像与右侧边界保持相同的距离，例如平板电脑/手机等 我的解决方案是像这样使用一个百分比:
background-position: 98% 6px;
它会固定在原地。
其他回答
这将适用于大多数现代浏览器…除了IE(浏览器支持)。尽管该页面列出了支持>= IE9，但我的测试并不同意这一点。
你可以像这样使用calc() css3属性;
.class_name {
background-position: calc(100% - 10px) 50%;
}
对我来说，这是最干净、最合乎逻辑的方式来实现向右的边缘。我还使用了border-right: 10px solid transparent;IE。
！! 过时的答案，因为CSS3带来了这个功能
有一种方法来定位背景图像从其元素的右边一定数量的像素?
不。
流行的变通方法包括
改为在元素上设置右边距 为图像本身添加透明像素，并将其定位在右上方 或者在元素宽度已知后使用jQuery计算位置。
最合适的答案是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+ */
是的!好吧，把背景图片从浏览器的右边定位成0px，而不是左边-我使用:
background-position: 100% 0px;
过时的答案:它现在在主要浏览器中实现，请参阅 这个问题还有其他答案。
CSS3修改了背景位置的规格，使它可以在不同的原点上工作。不幸的是，我找不到任何证据表明它已经在任何主流浏览器中实现。
http://www.w3.org/TR/css3-background/#the-background-position 参见例12。
background-position: right 3em bottom 10px;
