对大家都好

background: url('../images/bg-menu-dropdown-top.png') left 20px top no-repeat !important;

我试图做一个类似的任务，让一个下拉箭头总是在表头的右侧，并提出了这个似乎在Chrome和Firefox中工作，但safari告诉我这是一个无效的属性。

background: url(http://goo.gl/P93P5Q) center right 10px no-repeat;

在检查器中折腾了一番之后，我想出了这个跨浏览器的解决方案，它适用于IE8+、Chrome、Firefox和Safari，以及响应式设计。

background: url(http://goo.gl/P93P5Q) no-repeat 95% center;

这里是它的外观和工作方式的代码依赖。Codepen是用SCSS - http://cdpn.io/xqGbk编写的

据我所知，CSS规范并没有提供您所要求的内容，当然，除了CSS表达式之外。除去你不想使用表达式或Javascript的假设，我看到了三个hack的解决方案:

Make sure your background image matches the size of the container (at least in width) and set background-repeat: repeat or repeat-x if only the width is equalized. Then, having something appear x pixels from the right is as simple as background-position: -5px 0px. Using percentages for background-position exhibits special behaviour that is better seen than described here. Give it a shot. Essentially, background-position: 90% 50% will make the right edge of the background image line up 10% away from the right edge of the container. Create a div containing the image. Explicitly set the position of the containing element position: relative if not already set. Set the image container to position: absolute; right: 10px; top: 10px;, obviously adjusting the final two as you see fit. Place the image div container into the containing element.

你可以在CSS3中这样做:

background-position: right 20px bottom 20px;

它适用于Firefox, Chrome, IE9+

来源:中数

可以使用属性边框作为从右边开始的长度

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

另一个我没有看到提到的解决方案是使用伪元素，我相信这个解决方案将适用于任何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;
}

Example: The element eg. a square sized 100px (without considering borders) has a 10px padding and a background image should be shown inside the right padding. This means the pseudo-element is a 80px sized square. We want to stick it to the right border of the element with right:-10px;. If we'd like to have the background-image 5px away from the right border we need to stick the pseudo-element 5px away from the right border of the element with right:-5px;... Test it for your self here : http://jsfiddle.net/yHucT/