CSS 如何在css中从右侧设置固定背景位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5731520/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set fixed background position from right side in css?
提问by Jitendra Vyas
In this case
在这种情况下
li {background: url("../img/grey-arrow-next.png") no-repeat right center;
border-bottom: 1px solid #D4E8EB}
I want 20pxspace in right side before to background image and I can't give margin on libecause bordershould touch the edges.
我想要20px在背景图像之前的右侧留出空间，我不能留出边距，li因为border应该接触边缘。
So I need to set 20pxbut it takes 20pxfrom left side not right side.
所以我需要设置，20px但它需要20px从左侧而不是右侧。
li {background: url("../img/grey-arrow-next.png") no-repeat 20px center;
border-bottom: 1px solid #D4E8EB}
回答by Nizam Kazi
in your css mention position right then "spacing value(50px)" then other position(center/top)
在你的 css 中提到位置，然后是“间距值（50px）”然后是其他位置（中心/顶部）
li {background: url("../img/grey-arrow-next.png") no-repeat right 50px center;
border-bottom: 1px solid #D4E8EB}
Older Browser and IE8 and old version of IE does not support this code.Latest updated browsers has no conflicts with this method and hopefully future updates will support it too.
旧版浏览器和 IE8 及旧版 IE 不支持此代码。最新更新的浏览器与此方法没有冲突，希望未来的更新也能支持它。
If you are using modern browser, try background-position: calc(100% - 50px) center;as suggested in another answer too. calchas long way to go as it is logically and mathematically capable to produce much accurate result.
如果您使用的是现代浏览器，请background-position: calc(100% - 50px) center;按照另一个答案中的建议尝试。calc有很长的路要走，因为它在逻辑和数学上都能够产生非常准确的结果。
回答by Danny Coulombe
You can use the CSS3 "calc" function:
您可以使用 CSS3 的“calc”函数：
example:
例子：
background-position: calc(100% - 10px) center;
回答by A. Z.
Just add 20px blank space to the image right side in a graphic editor.
只需在图形编辑器中向图像右侧添加 20 像素的空白空间。
回答by Rajesh Paul
use the following code to add 20px to the rightof the background-image --
使用以下代码在背景图片的右侧添加 20px --
li {background: url("../img/grey-arrow-next.png") no-repeat right center;
border-bottom: 1px solid #D4E8EB; padding-right:20px}
use the following code to add 20px to the leftof the background-image --
使用以下代码在背景图像的左侧添加 20px --
li {background: url("../img/grey-arrow-next.png") no-repeat right center;
border-bottom: 1px solid #D4E8EB; padding-left:20px}
回答by Elieder
You can use other object inside li tag, and give it your background image with a margin-right:
您可以在 li 标签内使用其他对象，并为其提供带有边距的背景图像：
li #image {
margin-right: 20px;
background: url(pp.jpg) no-repeat right center;
}
li {
border: 1px solid #D4E8EB;
}
回答by Ian Wood
unfortunately the 'easy' solution is edit your image and add 20px right and bottom of transparent space.
不幸的是，“简单”的解决方案是编辑您的图像并在透明空间的右侧和底部添加 20 像素。
you could achieve it with background-clip / background-origin probably but that'd take a bit of playing with...
你可以用 background-clip / background-origin 来实现它，但这需要花点时间......
回答by Milk Man
border-right: 20px solid transparent;
回答by Mild Fuzz
place a span tag within the <li>and add the margin to that, that way your <li>should still stretch to the edge along with your border.
在 中放置一个 span 标签<li>并为其添加边距，这样您<li>仍然应该沿着边框延伸到边缘。
