使用CSS从右侧偏移背景图像

有一种方法来定位背景图像从其元素的右边一定数量的像素?

例如，要将某个东西从左边定位一定数量的像素(比如10)，我是这样做的:

#myElement {
    background-position: 10px 0;
}

当前回答

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

其他回答

如果你有一个固定宽度的元素，并且知道你的背景图像的宽度，你可以简单地设置background-position为:元素的宽度-图像的宽度-你想要在右边的间隙。

例如:对于一个100px宽的元素和一个300px宽的图像，要在右侧获得10px的间隙，您将其设置为100-300-10=-210px:

#myElement {
  background:url(my_image.jpg) no-repeat -210px top;
  width:100px;
}

你在元素的左边得到了图像最右边的80像素，在右边有一个20px的间隙。

我知道这听起来很愚蠢，但有时它节省了时间……我用垂直的方式(在底部的差距)导航链接与文字下面的图像。

但不确定这适用于你的案子。

！! 过时的答案，因为CSS3带来了这个功能

有一种方法来定位背景图像从其元素的右边一定数量的像素?

不。

流行的变通方法包括

改为在元素上设置右边距为图像本身添加透明像素，并将其定位在右上方或者在元素宽度已知后使用jQuery计算位置。

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

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

使用中心右边的位置，然后添加一个透明的边界来抵消它?

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

background-position: 98% 6px;

它会固定在原地。

推荐文章