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

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

例如，要将某个东西从左边定位一定数量的像素(比如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: 98% 6px;

它会固定在原地。

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

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

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

更新:

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

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

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

不。

流行的变通方法包括

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

是的!好吧，把背景图片从浏览器的右边定位成0px，而不是左边-我使用:

background-position: 100% 0px;

推荐文章