定位一个CSS背景图像x像素从右侧？
我认为答案是否定的，但是你可以用CSS来定位一个背景图像，所以它是一个固定的像素距离右边？
如果我设置了x和y的background-position值，似乎只能分别从左边和上边给出固定的像素调整。
background-position: right 30px center;
它适用于大多数浏览器。 请参阅： http : //caniuse.com/#feat=css-background-offsets获取完整列表。
更多信息： http : //www.w3.org/TR/css3-background/#the-background-position
可以使用属性border作为从右边的长度
background: url('/img.png') no-repeat right center; border-right: 10px solid transparent;
有一种方法，但不支持每个浏览器（请参阅此处的覆盖范围 ）
element { background-position : calc(100% - 10px) 0; }
它适用于每个现代浏览器， 但是IE9可能会崩溃 。 也没有覆盖= <IE8。
据我所知，当然， CSS规范并没有提供你正在问什么，除了CSSexpression式。 假设你不想使用expression式或Javascript，我看到了三个骇人的解决scheme：
- 确保背景图像与容器的大小相匹配（至less在宽度上），并设置
background-repeat: repeat如果仅宽度相同，则background-repeat: repeat或repeat-x。 然后，从右边出现x像素就像background-position: -5px 0px一样简单。 - 使用
background-position百分比performance出比这里描述的更好的特殊行为。 试一试。 基本上，background-position: 90% 50%将使背景图像的右边缘与容器的右边缘alignment10％。 - 创build一个包含图像的div。 显式设置包含元素
position: relative如果尚未设置）。 设置图像容器的position: absolute; right: 10px; top: 10px;position: absolute; right: 10px; top: 10px;，如果你认为合适的话，显然会调整最后两个。 将图像div容器放入包含元素中。
尝试这个：
#myelement { background-position: 100% 50%; margin-right: 5px; }
请注意，上面的代码将从右侧移动整个元素（不是仅背景图像）5px。 这可能是适合你的情况。
你可以在CSS3中做到这一点：
background-position: right 20px bottom 20px;
它适用于Firefox，Chrome，IE9 +
来源： MDN
图像解决方法右侧的透明像素作为右边距。
同样的图像解决方法是创build一个PNG或GIF图像（支持透明度的图像文件格式），在图像的右侧有一个透明的部分，完全等于您要给右边距的像素数例如：5px，10px等）
这在固定的宽度和百分比的宽度上一致地工作。 实际上，在头部右侧有一个加号/减号或上/下箭头图像的手风琴头部的一个很好的解决scheme！
下滑：不幸的是，除非容器的背景部分和CSS背景图像的背景颜色具有相同的平面颜色（没有渐变/晕影），否则不能使用JPG，大多数是白色/黑色等。
如果您碰巧在现代浏览器的这些日子里碰到这个话题，您可以使用伪类：after在后台做任何实际的事情。
.container:after{ content:""; position:absolute; right:20px; background:url(http://lorempixel.com/400/200) no-repeat right bottom; }
这个CSS将把背景放在右边20px空间的“.container”元素的右下angular。
看这个小提琴例如http://jsfiddle.net/h6K9z/226/
最合适的答案是用于背景定位的新的四值语法，但是直到所有的浏览器都支持它，最好的方法是以下顺序的早期响应组合：
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+ */
只需将像素填充到图像中 – 在Photoshop中将图像的canvas大小添加10px或其他内容，然后在CSS中alignment。
我试图做一个类似的任务，得到一个下拉箭头总是在表头的右侧，并提出了这似乎在Chrome和Firefox的工作，但Safari浏览器告诉我，这是一个无效的财产。
background: url(http://goo.gl/P93P5Q) center right 10px no-repeat;
在做了一些检查工作之后，我想出了一个在IE8 +，Chrome，Firefox和Safari中使用的跨浏览器解决scheme，以及响应式devise。
background: url(http://goo.gl/P93P5Q) no-repeat 95% center;
这是一个如何看起来和工作的codepen。 Codepen是用SCSS编写的 – http://cdpn.io/xqGbk
我还没有见到的另一个解决scheme是使用伪元素，我相信这个解决scheme可以与任何CSS 2.1兼容的浏览器（≥IE8，≥Safari 2，…）一起工作，它也应该是响应式的：
element::after { content:' '; position:relative; display:block; width:100%; height:100%; bottom:0; right:-5px; /* 10 px from the right of element inner-margin (padding) see example */ background:url() right center no-repeat; }
例如 ：元素例如。 一个大小为100px的正方形（不考虑边框）有一个10px的填充，背景图像应该显示在正确的填充内。 这意味着伪元素是一个80px大小的正方形。 我们想把它贴在右边的元素的右边：-10px; 。 如果我们希望背景图像5px远离右边框，我们需要将伪元素5px远离元素的右边框：right：-5px; …在这里testing你的自我： http : //jsfiddle.net/yHucT/
如果容器有一个固定的高度： Tweek百分比（背景位置），直到它适合正确。
如果容器具有dynamic高度：如果要在背景和容器之间填充（如自定义样式input，select时），请将填充添加到图像中，并将背景位置设置为右侧或底部。
我偶然发现这个问题，当我试图让一个select框的背景适合从我的select的权利说5 px。 在我的情况下，我的背景是一个向下箭头，将取代基本的下拉图标。 在我的情况下，填充将始终与背景保持相同（从右到左5-10像素），因此可以轻松修改实际的背景图像（使其右侧的图像尺寸增加5-10像素）。
希望这可以帮助！
您可以将您的背景图像放在编辑器中，从右侧开始放置x像素。
background: url(images_url) no-repeat right top;
背景图像将位于右上方，但是会显示为右侧的x像素。
调整从左边的百分比是有点脆我喜欢。 当我需要像这样的东西时，我倾向于将我的容器样式添加到包装元素，然后将内部元素的背景应用于background-position: right bottom
<style> .wrapper { background-color: #333; border: solid 3px #222; padding: 20px; } .bg-img { background-image: url(path/to/img.png); background-position: right bottom; background-repeat: no-repeat; } .content-breakout { margin: -20px } </style> <div class="wrapper"> <div class="bg-img"> <div class="content-breakout"></div> </div> </div>
.content-breakout类是可选的，如果需要的话，允许你的内容进入填充（负边距值应该与包装填充中的相应值相匹配）。 它有点冗长，但可靠地工作，而不必关心图像相对于其宽度和高度的相对位置。
由于这个问题已经被问到了，所以这个问题已经很大了，但是我碰到了这个问题，我就这样做了：
background-position:95% 50%;
负值的解决scheme。 调整填充右键以移动图像。
<div style='overflow:hidden;'> <div style='width:100% background:url(images.jpg) top right; padding-right:50px;'> </div> </div>
这在Chrome 27中有效，我不知道它是否有效，或者其他的browswers是如何处理的。 我对此感到惊讶。
background: url(../img/icon_file_upload.png) top+3px right+10px no-repeat;
适用于所有真正的浏览器（和IE9 +）：
background-position: right 10px top 10px;
我用它来RTL的WordPress主题。 看例子： 临时网站或真实网站即将上线。 看看大DIV右侧的图标。
更好的所有背景：url（'../ images / bg-menu-dropdown-top.png'）left 20px top no-repeat！important;
