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

yes! well to position a background image as though 0px from the right-hand side of the browser instead of the left - i use:

background-position: 100% 0px;

my problem was I needed the background image to stay the same distance from the right border when the window is resized i.e. for tablet / mobile etc My fix is to use a percenatge like so:

background-position: 98% 6px;

and it sticks in place.

如果您具有固定的宽度元素并且知道背景图像的宽度，则只需将背景位置设置为：元素的宽度-图像的宽度-您想要在右边的间隙。

例如：使用100px宽的元素和300px宽的图像，要在右侧获得10px的间距，请将其设置为100-300-10 = -210px：

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

您将在元素的左侧获得图像的最右侧80像素，在右侧获得20px的间距。

我知道它听起来很愚蠢，但有时可以节省时间...我在垂直链接（底部有间隙）中使用了很多图像（位于图像下方）。

不确定是否适用于您的情况。

使用中心右边作为位置，然后添加透明边框以抵消它？

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

好吧，如果我理解您的要求，您会这样做；

你叫你的DIV容器#main-container，并.my-element认为是内它。使用它可以入门。

#main-container { 
  position:relative;
}
/*To make the element absolute - floats above all else within the parent container do this.*/
.my-element {
  position:absolute;
  top:0;
  right:10px;
}

/*To make the element apart of elements, something tangible that affects the position of other elements on the same level within the parent then do this;*/
.my-element {
  float:right;
  margin-right:10px;
}

顺便说一句，如果您在页面中引用较低级别的元素，则最好使用类（我假设您是上面的我的名字的更改）。

如果您有比例元素，则可以使用：

.valid {
    background-position: 98% center;
}

.half .valid {
    background-position: 96% center;
}

在此示例中，.valid将是带有图片的类，并且.half将是一行，其大小是标准行的一半。

肮脏，但很吸引人，并且合理管理。

Firefox 14现在支持CSS3规范，该规范允许使用不同的背景位置，但Chrome 21仍不支持（显然IE9部分支持它们，但我自己尚未对其进行测试）

@MattyF引用的Chrome问题之外，这里还有更简洁的摘要：http : //code.google.com/p/chromium/issues/detail? id=95085

除IE （浏览器支持）外，这将在大多数现代浏览器上运行。即使该页面列出了受支持的> = IE9，我的测试也不同意。

您可以像这样使用calc（）css3属性；

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

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

一个简单但肮脏的技巧是将所需的偏移量简单地添加到用作背景的图像中。它是不可维护的，但却可以完成工作。

过时的答案：现在已在主要的浏览器中实现，请参阅此问题的其他答案。

CSS3修改了的规范background-position，使其可以在不同的起点使用。不幸的是，我找不到任何证据可以在任何主流浏览器中实现。

http://www.w3.org/TR/css3-background/#the-background-position 参见示例12。

background-position: right 3em bottom 10px;

在最合适的答案是背景，地位的新的四值的语法，但直到所有的浏览器都支持你的最好的办法是按以下顺序较早响应的组合：

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+ */

最简单的解决方案是使用百分比。自从您要求像素精度以来，这并不是您一直在寻找的答案，但是，如果您只需要在右侧边缘和图像之间添加一些填充的内容，则将位置设置为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带来了此功能

有没有一种方法可以将背景图像从其元素的右侧定位一定数量的像素？

不。

流行的解决方法包括

• margin-right在元素上设置a
• 向图像本身添加透明像素并将其定位 top right
• 或在知道元素的宽度后使用jQuery计算位置。

我发现此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/

更新：

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