如何在CSS中从右侧设置固定的背景位置?

在这种情况下

li {background: url("../img/grey-arrow-next.png") no-repeat right center; border-bottom: 1px solid #D4E8EB} 

我想在背景图像之前的右侧20px空间,我不能给li边缘,因为border应该触及边缘。

所以我需要设置20px但从左侧,而不是右侧20px

 li {background: url("../img/grey-arrow-next.png") no-repeat 20px center; border-bottom: 1px solid #D4E8EB} 

在你的CSS提到的位置右“空格值(50px)”,然后其他位置(中心/顶部)

 li {background: url("../img/grey-arrow-next.png") no-repeat right 50px center; border-bottom: 1px solid #D4E8EB} 

旧浏览器和IE8和旧版本的IE不支持此代码。 最新更新的浏览器与这种方法没有冲突,并希望未来的更新也会支持。

如果您使用的是现代浏览器,请尝试background-position: calc(100% - 50px) center; 正如另一个答案所build议的。 calc还有很长的路要走,因为它在逻辑和math上能够产生非常准确的结果。

你可以使用CSS3“calc”函数:

例:

 background-position: calc(100% - 10px) center; 

只需在图像编辑器中将20px空格添加到图像右侧即可。

你可以在li标签中使用其他的对象,并给它的背景图像一个保证金的权利:

 li #image { margin-right: 20px; background: url(pp.jpg) no-repeat right center; } li { border: 1px solid #D4E8EB; } 

使用以下代码将20px添加到背景图片的右侧

 li {background: url("../img/grey-arrow-next.png") no-repeat right center; border-bottom: 1px solid #D4E8EB; padding-right:20px} 

使用以下代码将20px添加到背景图片的左侧

 li {background: url("../img/grey-arrow-next.png") no-repeat right center; border-bottom: 1px solid #D4E8EB; padding-left:20px} 

不幸的是,“简单”的解决scheme是编辑你的图像,并添加20px透明空间的权利和底部。

你可以实现它背景剪辑/背景起源可能,但这需要一点玩…

 border-right: 20px solid transparent; 

<li>放置一个span标签并添加边距,这样你的<li>仍然应该和边框一起伸展到边缘。

你可以从左边指定百分比,

 background-position: 97% 50%; 

这不是px,而是像右边的3%