如何在css中从右侧设置固定的背景位置？

Question

在这种情况下

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;另一个答案中的建议.calc还有很长的路要走,因为它在逻辑上和数学上都能够产生更准确的结果.

Answer 2

您可以使用CSS3"calc"函数:

例:

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

Answer 3

只需在图形编辑器中向图像右侧添加20px空白区域即可.

Answer 4

在 中放置一个跨度标签<li>并为其添加边距，这样您<li>仍然应该沿着边框拉伸到边缘。