有一种方法来定位背景图像从其元素的右边一定数量的像素?
例如，要将某个东西从左边定位一定数量的像素(比如10)，我是这样做的:
#myElement {
background-position: 10px 0;
}
当前回答
！! 过时的答案，因为CSS3带来了这个功能
有一种方法来定位背景图像从其元素的右边一定数量的像素?
不。
流行的变通方法包括
改为在元素上设置右边距 为图像本身添加透明像素，并将其定位在右上方 或者在元素宽度已知后使用jQuery计算位置。
其他回答
我的问题是，当窗口调整大小时，我需要背景图像与右侧边界保持相同的距离，例如平板电脑/手机等 我的解决方案是像这样使用一个百分比:
background-position: 98% 6px;
它会固定在原地。
！! 过时的答案，因为CSS3带来了这个功能
有一种方法来定位背景图像从其元素的右边一定数量的像素?
不。
流行的变通方法包括
改为在元素上设置右边距 为图像本身添加透明像素，并将其定位在右上方 或者在元素宽度已知后使用jQuery计算位置。
background-position: calc(100% - 8px);
最简单的解决方案是使用百分比。这并不是您想要的答案，因为您要求的是像素精度，但如果您只是需要在右边缘和图像之间有一些填充，那么给出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特性很有用:
/* 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/
更新:
现在所有主流浏览器都支持该功能，包括移动浏览器。
