Question

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

例如，要从 left 中定位一定数量的像素（例如10），我就是这样做的：

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

Answer 1

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

<强>更新：

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

Answer 2

<强> !!过期答案，自CSS3 brought this feature
以来

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

不。

热门的解决方法包括

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

Answer 3

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

Answer 4

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

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

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

background-position: right 3em bottom 10px;

Answer 5

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

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

我使用它，因为在答案中提出的指定偏移量的CSS3功能标记为解决问题在浏览器中不太受支持。 E.g。

Answer 6

most appropriate answer是背景位置的新四值语法，但在所有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+ */

Answer 7

一个简单但又脏的技巧是简单地将您想要的偏移量添加到您用作背景的图像中。它不可维护，但它完成了工作。

Answer 8

这将适用于大多数现代浏览器...除了IE (browser support)。即使该页面列出了支持的＆gt; = IE9，我的测试也不同意。

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

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

对我而言，这是获得右边保证金的最简洁，最合乎逻辑的方式。我还使用了border-right: 10px solid transparent;用于IE的后备。

Answer 9

好的如果我理解你的要求，你会这样做;

您的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;
}

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

Answer 10

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

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

Answer 11

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

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

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

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

肮脏，但作为一种魅力，它是合理可管理的。

Answer 12

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

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

Answer 13

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

Answer 14

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

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

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

你的元素左边的图像最右边是80像素，右边是20px的间隙。

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

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

Answer 15

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

background-position: 98% 6px;

它坚持到位。

Answer 16

是的！以及如何从浏览器的右侧而不是左侧定位背景图像 - 我使用：

background-position: 100% 0px;

Answer 17

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

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

17 个答案: