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

Question

在这种情况下

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

我希望在背景图像之前的右侧有20px的空间，但是我不能给li设置margin，因为border应该与边缘接触。

所以我需要设置20px，但它从左侧而不是右侧获取了20px。

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

- Jitendra Vyas

---

除了使用JS计算元素的宽度，减去“20 +背景图像的宽度”，并将背景图像从左侧向右推动那些像素之外，我想不到其他的方法。这种方法并不是很优雅...根本不是。 - Ege Özcan

如果问题已经得到令人满意的回答，也许您应该选择其中一个答案。 - Knelis

Answer 1

在您的 CSS 中提到右侧位置，然后是 "间距值（50px）"，然后是其他位置（居中/顶部）。

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

旧版浏览器和IE8及早期版本不支持此代码。最新的更新浏览器对此方法没有冲突，希望未来的更新也会支持。

如果您使用现代浏览器，请尝试background-position: calc(100% - 50px) center;，这也是另一个答案中建议的方法。calc逻辑上和数学上能够产生更精确的结果。

- Nizam Kazi

---

太棒了！我从没想到你可以像那样合成数值。 - Kyle

这应该被标记为“已接受的答案”，它对我有效。 - Asad kamran

这在Windows Safari中不起作用。 - Michael J. Calkins

这太棒了，为什么这不是一个记录在案的功能？ - zykadelic

这实际上为我创建了右侧的空白。我使用了百分比值而不是像素值。 - Con Antonakos

仅供完成：在IE8中也不起作用，请参见https://dev59.com/C2435IYBdhLWcg3w6EmF - Volker E.

Answer 2

你可以使用CSS3的"calc"函数:

例子:

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

- Danny Coulombe

---

这在所有现代浏览器中都可以使用，但不支持IE8及以下版本（http://caniuse.com/calc）。请注意，在CSS预处理器中使用calc可能会得到意想不到的结果，除非对计算进行转义。例如，`Less`将`calc(100% - 10px)处理为calc(90%)，除非写成~"calc(100% - 10%)"`。 - ajcw

在IE7及以下版本中，您可以使用“表达式”来解决此问题，在IE8中，您几乎无法解决。 - Benjamin Gruenbaum

@JohnCatterfeld 如果有人只是匆匆浏览您的评论，那么值得注意的是'"calc(100% - 10%)"' == 'calc(90%)'; 当使用LESS时，您可能正在寻找'"calc(100% - 10px)"'。 - Dandy

@JohnCatterfeld的代码完美运行，但是你有什么想法可以让Visual Studio在不关闭错误提示的情况下不再抱怨无效属性？“calc(100% - 10px)”对于background-position来说不是有效的属性。虽然这只是一个警告，但最好还是尽早解决它。 - Matt Skeldon

Answer 3

只需在图形编辑器中向图像右侧添加 20px 的空白空间。

- A. Z.

---

这是最简单的选择！但我相信这不是唯一的方法！ - Nizam Kazi

这是一种非常丑陋的方法。 - Marvin Rabe

@MarvinRabe 建议更好的方案。 - A. Z.

最高评分答案怎么说？ - Matt Fletcher

今天更好的解决方案是使用 calc：https://dev59.com/C2025IYBdhLWcg3w6KSO#16845269 - A. Z.

跨浏览器的超级解决方案，一流。 - emil.c

Answer 4

您可以在li标签内使用其他对象，并使用margin-right为其添加背景图像：

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

li {
    border: 1px solid #D4E8EB;
}

- Elieder

---

但是我不能使用#image的背景图像。因为我需要垂直居中的背景图像，并且还有其他元素也在li内部。 - Jitendra Vyas

Answer 5

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

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

使用以下代码将20px添加到background-image的左侧 -

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

- Rajesh Paul

Answer 6

border-right: 20px solid transparent;

- Milk Man

Answer 7

在 <li> 中放置一个 span 标签，并将边距添加到其中，这样您的 <li> 仍应该与您的边框一起延伸到边缘。

- Mild Fuzz

---

但是如果我给 ul 添加填充，border 也会留下空间，这不是我想要的。 - Jitendra Vyas

我已经编辑了答案，使其更接近您所需的内容。 - Mild Fuzz

但是背景图片我不能在 span 上使用。 - Jitendra Vyas

当然可以，只需使用 display:block;。 - Mild Fuzz

Answer 8

不幸的是，“简单”的解决方案是编辑您的图像并在右侧和底部添加20px的透明空间。

您可能可以通过background-clip / background-origin实现它，但需要进行一些尝试...

- Ian Wood

---

我在许多地方使用同一张图片，但我认为如果没有其他解决方案，为一个情况编辑该图片应该是可以的。 - Jitendra Vyas