有没有办法将背景图像从其元素右侧定位一定数量的像素？
例如，要从 left 定位一定数量的像素（比如 10 个像素），我会这样做：
#myElement {
background-position: 10px 0;
}
【问题讨论】：
background-position: -10px 0;？只是检查:)
标签： 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/
更新：
现在所有主流浏览器都支持此功能，包括移动浏览器。
【讨论】：
rightlefttopbottom。例如，以下内容不会呈现：background-position: right 10px 10px 但应写为background-position: right 10px top 10px
！！过时的答案，因为CSS3 brought this feature
有没有办法将背景图片从元素右侧定位到一定数量的像素？
不。
流行的解决方法包括
margin-right
top right
【讨论】：
最简单的解决方案是使用百分比。这并不是您正在寻找的答案，因为您要求像素精度，但如果您只需要一些东西在右边缘和图像之间有一点填充，那么给出 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;
【讨论】：
Version 21.0.1180.89
正如here 建议的那样，这是一个非常完美的跨浏览器解决方案：
background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;
我使用它是因为在标记为解决问题的答案中提出的指定偏移量的 CSS3 功能在浏览器中还没有得到很好的支持。例如
【讨论】：
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+ */
【讨论】：
一个简单但肮脏的技巧是简单地将您想要的偏移量添加到您用作背景的图像中。它不可维护，但可以完成工作。
【讨论】：
这将适用于大多数现代浏览器...除了 IE (browser support)。即使该页面列出 >= IE9 支持，但我的测试并不同意。
您可以像这样使用 calc() css3 属性；
.class_name {
background-position: calc(100% - 10px) 50%;
}
对我来说，这是获得右侧边距的最干净、最合乎逻辑的方法。我还对 IE 使用 border-right: 10px solid transparent; 的后备方式。
【讨论】：
background-position: 92% 8px; background-position: calc(100% - 12px) 8px;
right 10px center 语法在浏览器中具有更多扩展支持。
_ 替换为 -
好的，如果我理解你的要求，你会这样做；
您有一个名为#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;
}
顺便说一句，如果您在页面中引用较低级别的元素，最好使用类（我假设您因此在上面更改了我的名字。
【讨论】：
现在 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 元素中添加一个 span 或 <i> 元素来执行相同的操作。但我认为这是向按钮添加图标的一种更简洁的方式，并且支持跨浏览器。
你可以在这里查看小提琴： http://codepen.io/anon/pen/PNzYzZ
【讨论】：
content: ''; 而不是 content:0; 但这对我来说是一个有用的解决方案
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;
【讨论】：