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

我发现这个 CSS3 功能很有帮助：

/* to position the element 10px from the right */
background-position: right 10px top;

据我所知，这在 IE8 中不受支持。在最新的 Chrome/Firefox 中它工作正常。

有关支持的浏览器的详细信息，请参阅 Can I use。

使用的来源：http://tanalin.com/en/blog/2011/09/css3-background-position/

更新：

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

---

！！过时的答案，因为 CSS3 带来了这个特性

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

没有。

流行的解决方法包括

而是在元素上设置一个margin-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;

---

正如所提议的 here，这是一个非常完美的跨浏览器解决方案：

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

我使用它是因为在标记为解决问题的答案中提出的指定偏移量的 CSS3 功能在浏览器中还没有得到很好的支持。例如

---

most appropriate answer 是 background-position 的新四值语法，但在所有 browsers support it 之前，您最好的方法是按以下顺序组合较早的响应：

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 (browser support)。即使该页面列出了 >= IE9 作为支持，我的测试并不同意这一点。

您可以像这样使用 calc() css3 属性；

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

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

---

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

您有一个名为 #main-container 和 .my-element 的 DIV 容器。使用它来帮助您入门；

#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 规范现在在 Firefox 14 中得到支持，但在 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 元素中添加一个 span 或 <i> 元素来执行相同的操作。但我认为这是向按钮添加图标的一种更简洁的方式，并且支持跨浏览器。

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

---

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

---

使用 center right 作为位置然后添加一个透明边框来偏移它？

---

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

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

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

你会在元素左侧获得图像最右边的 80 像素，右侧有 20 像素的间隙。

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

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

---

我的问题是我需要背景图像在调整窗口大小时与右边框保持相同的距离，即用于平板电脑/移动设备等我的解决方法是使用如下百分比：

background-position: 98% 6px;

它固定在适当的位置。

---

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

background-position: 100% 0px;

---