使用CSS从右侧偏移背景图像
有没有办法将背景图像从其元素的右侧放置一定数量的像素？
例如，要从左侧定位一定数量的像素（比如10），我就是这么做的：
#myElement { background-position: 10px 0; } 我发现这个CSS3function很有用：
/* to position the element 10px from the right */ background-position: right 10px top;
据我所知，这是不支持在IE8。 在最新的Chrome / Firefox中，它工作正常。
请参阅我可以使用支持的浏览器的详细信息。
使用的来源： http : //tanalin.com/zh/blog/2011/09/css3-background-position/
！ 过时的答案，因为CSS3带来了这个function
有没有办法将背景图像从其元素的右侧放置一定数量的像素？
不。
stream行的解决方法包括
- 而是在元素上设置
margin-right - 为图像本身添加透明像素并将其定位在
top right - 或者在元素宽度已知之后使用jQuery计算位置。
最简单的解决scheme是使用百分比。 这并不是你要求像素精度的正确答案，但是如果你只是需要在右边缘和图像之间有一点点填充，给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("http://img.dovov.comsource.jpg") 99% center no-repeat; }
过时的答案：现在在主要浏览器中实现，请参阅此问题的其他答案。
CSS3已经修改了background-position的规范，以便它可以在不同的原点上工作。 不幸的是，我找不到任何证据表明它已经在任何主stream浏览器中实现。
http://www.w3.org/TR/css3-background/#the-background-position请参阅示例12。;
background-position: right 3em bottom 10px;
正如在这里提出的，这是一个相当完美的跨浏览器解决scheme：
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支持，我的testing不同意这一点。
你可以像这样使用calc（）css3属性;
.class_name { background-position: calc(100% - 10px) 50%; }
对我来说，这是实现右边距的最清洁和最合乎逻辑的方式。 我也使用使用border-right: 10px solid transparent;的fallback 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部分支持它们，但我没有自己testing）
除了@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是一个标准尺寸的一半。
脏，但作为一个魅力，它是合理的pipe理。
如果你想用这个箭头/其他图标添加到一个button，例如，那么你可以使用CSS的伪元素？
如果它真的是整个button的背景图像，我倾向于将间距合并到图像中，然后使用
background-position: right 0;
但是，如果我必须添加例如一个devise的箭头button，我倾向于这个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('..http://img.dovov.combtn-white-arrow-right.png'); position: absolute; right: 12px; top: 10px; }
通过使用：afterselect器，我添加一个使用CSS的元素来包含这个小图标。 你可以通过在a元素中添加一个span或者<i>元素来做同样的事情。 但我认为这是一个更清洁的button图标添加方式，它支持跨浏览器。
你可以看看这里的小提琴： http : //codepen.io/anon/pen/PNzYzZ
使用中心右侧的位置，然后添加一个透明的边框来抵消它？
如果你有一个固定宽度的元素，并知道你的背景图像的宽度，你可以简单地设置背景位置为：元素的宽度 – 图像的宽度 – 你想要在右边的空白处。
例如：使用100px宽的图片和300px宽的图片，要在右侧获得10px的空白，请将其设置为100-300-10 = -210px：
#myElement { background:url(my_image.jpg) no-repeat -210px top; width:100px; }
你的元素左边的图像最右边80个像素，右边20px。
我知道它可以听起来很愚蠢，但有时它节省了时间…我用垂直的方式（底部的差距）导航链接文本下面的图像。
不知道它适用于你的情况。
我的问题是我需要的背景图像保持相同的距离，当窗口被resize，即平板电脑/手机等的右边界我的修复是使用像这样的percenatge：
background-position: 98% 6px;
并坚持到位。
是！ 以及如何从浏览器的右侧，而不是左侧来定位背景图像 – 我使用：
background-position: 100% 0px;
