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

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

例如，要从左侧定位一定数量的像素（例如10个），这就是我的方法：

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

我发现此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带来了此功能

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

不。

流行的解决方法包括

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

最简单的解决方案是使用百分比。自从您要求像素精度以来，这并不是您一直在寻找的答案，但是，如果您只需要在右侧边缘和图像之间进行一些填充，则将其放置在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修改了的规范background-position，使其可以在不同的起点使用。不幸的是，我找不到任何证据可以在任何主流浏览器中实现。

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

background-position: right 3em bottom 10px;

至于提出的在这里，这是一个完美的作品相当跨浏览器的解决方案：

background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;

我之所以使用它，是因为到目前为止，浏览器还不支持指定答案中建议的偏移量的CSS3功能，该偏移量标记为解决问题。例如

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

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

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

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

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

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

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

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

你叫你的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;
}

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

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

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

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

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

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

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

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

例如，如果您想使用它为按钮添加箭头/其他图标，那么可以使用css伪元素？

如果它确实是整个按钮的背景图像，我倾向于将间距合并到图像中，然后使用

background-position: right 0;

但是，如果我必须在按钮上添加例如设计好的箭头，则倾向于使用以下html：

<a href="[url]" class="read-more">Read more</a>

并倾向于使用CSS执行以下操作：

.read-more{
    position: relative;
    padding: 6px 15px 6px 35px;//to create space on the right
    font-size: 13px;
    font-family: Arial;
}

.read-more:after{
    content: '';
    display: block;
    width: 10px;
    height: 15px;
    background-image: url('../images/btn-white-arrow-right.png');
    position: absolute;
    right: 12px;
    top: 10px;
}

通过使用：after选择器，我使用CSS添加了一个元素，只是包含了这个小图标。您可以通过在a <i>元素内部添加一个span或element 来做同样的事情。但是我认为这是向按钮添加图标的一种更干净的方式，并且它是跨浏览器支持的。

您可以在此处查看小提琴：http : //codepen.io/anon/pen/PNzYzZ

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

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

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

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

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

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

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

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

我的问题是，当调整窗口大小时，例如，对于平板电脑/移动设备，我需要背景图像与右边框保持相同的距离，我的解决方法是使用像这样的方法：

background-position: 98% 6px;

它粘在适当的位置。

是！很好地将背景图像定位为好像从浏览器的右侧而不是左侧的0px-我使用：

background-position: 100% 0px;