如何在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} 

Answer 1

在你的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上能够产生非常准确的结果。

Answer 2

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

例：

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

Answer 3

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

Answer 4

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

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

Answer 5

使用以下代码将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} 

Answer 6

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

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

Answer 7

 border-right: 20px solid transparent; 

Answer 8

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

Answer 9

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

 background-position: 97% 50%; 

这不是px，而是像右边的3％