如何在css中从右侧设置固定背景位置？ [复制]答案

【问题标题】：How to set fixed background position from right side in css? [duplicate]如何在css中从右侧设置固定背景位置？ [复制]
【发布时间】：2011-08-09 13:06:00
【问题描述】：

在这种情况下

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}

【问题讨论】：

想不到除了用js计算元素的宽度，减去“20+背景图片的宽度”，把左边那个像素的背景图片推到右边.不是很优雅……一点也不。
如果问题得到满意的回答，也许您应该选择其中一个答案。

标签： css

【解决方案1】：

您可以使用 CSS3 的“计算”功能：

示例：

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

【讨论】：

这适用于所有现代浏览器 - 不支持 IE8 及更低版本 (caniuse.com/calc)。请注意，在 CSS 预处理器中使用 calc 可能会得到不希望的结果，而不会转义计算。例如Less 将calc(100% - 10px) 处理为calc(90%)，除非写为~"calc(100% - 10%)"。
在 IE7 及更低版本中，您可以使用 expressions 解决此问题，在 IE8 中您几乎被卡住了。
@JohnCatterfeld 值得注意的是，如果有人只是浏览您的评论，'~"calc(100% - 10%)"' == 'calc(90%)';使用 LESS 时，您可能正在寻找 '~"calc(100% - 10px)"'。
@JohnCatterfeld 工作得很好，但是知道如何在不完全关闭错误的情况下阻止 Visual Studio 抱怨无效属性吗？ ~"calc(100% - 10px)" 不是背景位置的有效属性。它只是一个警告，但很快它就没有出现

【解决方案2】：

在您的 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 有很长的路要走，因为它在逻辑和数学上能够产生非常准确的结果。

【讨论】：

这太棒了。我不知道你可以复合这样的值。
这应该被标记为 ACCEPTED ANSWER，它对我有用。
这在 Windows Safari 中不起作用。
这太棒了，为什么这不是一个记录的功能？
这实际上为我在右侧创建了空白。我使用百分比值而不是像素值。

【解决方案3】：

border-right: 20px solid transparent;

【讨论】：

【解决方案4】：

使用以下代码在背景图片的右侧添加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}

【讨论】：

【解决方案5】：

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

【讨论】：

这是最简单的选择！但是我相信这不是唯一的方法！
这是一种非常丑陋的做法。
@MarvinRabe 提出更好的建议。
评分最高的答案怎么说？
今天更好的解决方案是使用calc:stackoverflow.com/a/16845269/1447182

【解决方案6】：

你可以在 li 标签中使用其他对象，并给它你的背景图片与margin-right：

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

li {
    border: 1px solid #D4E8EB;
}

【讨论】：

但我不能将背景图像与#image 一起使用。因为我需要始终垂直居中的背景图像，并且li中还有其他元素

【解决方案7】：

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

【讨论】：

但如果我在ul 中添加填充，border 也会留下我不想要的空间。
我已编辑答案以更接近您的需要。
但是我不能在span上使用背景图片
可以，只要使用 display: block;

【解决方案8】：

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

您可能可以使用 background-clip / background-origin 来实现它，但这需要一些时间......

【讨论】：

我在很多地方都使用相同的图像，但我认为如果没有其他解决方案，我认为为一种情况编辑图像是可以的