我认为答案是否定的,但是你可以用CSS定位一个背景图像,这样它就离右边有一个固定数量的像素?

如果我设置x和y的背景位置值,似乎它们只分别从左边和上面给出固定的像素调整。


当前回答

求负值的解。调整右填充来移动图像。

<div style='overflow:hidden;'>

    <div style='width:100% background:url(images.jpg) top right; padding-right:50px;'>

    </div>

</div>

其他回答

如果你只想指定x轴,你可以这样做:

background-position-x: right 100px;

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

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

据我所知,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.

有一种方法,但不是每个浏览器都支持(见这里的覆盖)

element {
  background-position : calc(100% - 10px) 0;
}

它适用于所有现代浏览器,但IE9可能会崩溃。也没有覆盖=< IE8。

我试图做一个类似的任务,让一个下拉箭头总是在表头的右侧,并提出了这个似乎在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编写的