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

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

有没有办法将背景图像从其元素的右侧定位到一定数量的像素？

不。

常用的解决方法包括

• 而是在元素上设置 amargin-right
• 将透明像素添加到图像本身并对其进行定位top right
• 或者在已知元素的宽度后使用 jQuery 计算位置。

好的，如果我明白你的要求，你会这样做;

您调用了 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;
}

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

过时的答案：它现在在主流浏览器中实现，请参阅 这个问题的其他答案。

CSS3 修改了 的规范，以便它可以与不同的原点一起使用。不幸的是，我找不到任何证据表明它在任何主要浏览器中都实现了。background-position

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

background-position: right 3em bottom 10px;

最简单的解决方案是使用百分比。这并不是您一直在寻找的答案，因为您要求像素精度，但是如果您只需要在右边缘和图像之间有一点填充，那么给某些东西一个 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;
}

Firefox 14 现在支持允许背景位置不同来源的 CSS3 规范，但在 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/

更新：

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

这将适用于大多数现代浏览器......除了IE（浏览器支持）。尽管该页面列出了支持的 >= IE9，但我的测试并不同意这一点。

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

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

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

正如这里所建议的，这是一个非常跨浏览器的解决方案，可以完美地工作：

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

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

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

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

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

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

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

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

最合适的答案是 background-position 的新四值语法，但在所有浏览器都支持它之前，最好的方法是按以下顺序组合早期的响应：

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

我的问题是，当窗口调整大小时，我需要背景图像与右边框保持相同的距离，即平板电脑/手机等 我的解决方法是使用这样的 percenage：

background-position: 98% 6px;

它粘在原位。

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

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

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

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

肮脏，但作为一种魅力，而且相当容易管理。

是的！好吧，要从浏览器的右侧而不是左侧定位背景图像，就好像 0px 一样 - 我使用：

background-position: 100% 0px;

例如，如果您想使用它向按钮添加箭头/其他图标，那么您可以使用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 元素中添加 span 或元素来执行相同的操作。但我认为这是一种向按钮添加图标的更简洁的方式，并且支持跨浏览器。<i>

你可以在这里查看小提琴： http://codepen.io/anon/pen/PNzYzZ

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