CSS 如何将背景位置设置为绝对距离，从右边开始？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/114501/
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 the background-position to an absolute distance, starting from right?
提问by bahadorn
I want to set a background image for a div, in a way that it is in the upper RIGHTof the div, but with a fixed 10pxdistance from top and right.
我想设置一个背景图像一个div，在某种程度上，这是在上RIGHT的div，但有固定10px的顶部和右侧的距离。
Here is how I would do that if wanted it in the upper LEFTof the div:
下面是我会怎么做，如果在上希望它LEFT的div：
background: url(images/img06.gif) no-repeat 10px 10px;
Is there anyway to achieve the same result, but showing the background on the upper RIGHT?
反正是有达到同样的效果，但显示在上背景RIGHT？
采纳答案by roryf
Use the previously mentioned rule along with a top and right margin:
使用前面提到的规则以及顶部和右边距：
background: url(images/img06.gif) no-repeat top right;
margin-top: 10px;
margin-right: 10px;
Background images only appear within padding, not margins. If adding the margin isn't an option you may have to resort to another div, although I'd recommend you only use that as a last resort to try and keep your markup as lean and sementic as possible.
背景图像仅出现在内边距内，而不出现在边距内。如果添加边距不是一种选择，您可能不得不求助于另一个 div，尽管我建议您仅将其用作最后的手段，以尽量保持您的标记精简和语义化。
回答by Boldewyn
In all modern browsers and IE down even to version 9 you can use a four-value syntax, specified in CSS3:
在所有现代浏览器和 IE 甚至版本 9 中，您都可以使用CSS3 中指定的四值语法：
background-position: right 10px top 10px;
Source: MDN
来源：MDN
回答by Justin Poliey
There are a few ways you can do this.
有几种方法可以做到这一点。
Do the math yourself, if possible. You already know the dimensions of your image. If you know the dimensions of the div, you can just put the image at (div width - image width - 10, div height - image height - 10).
Use Javascript to do the heavy lifting for you. Pretty much the same method as above, except you don't need to know the dimensions of the div itself. Javascript can tell you.
A more hackish way would be to put a 10px transparent border around the top and right of your image, and set the position to
top right.
如果可能的话，自己计算一下。您已经知道图像的尺寸。如果您知道 div 的尺寸，您可以将图像放在（div 宽度 - 图像宽度 - 10，div 高度 - 图像高度 - 10）处。
使用 Javascript 为您完成繁重的工作。与上面的方法几乎相同，只是您不需要知道 div 本身的尺寸。JavaScript 可以告诉你。
一种更黑客的方法是在图像的顶部和右侧放置一个 10px 的透明边框，并将位置设置为
top right.
回答by mathieu
I don't know if it is possible in pure css, so you can try
我不知道纯css是否可行，所以你可以试试
background: url(images/img06.gif) no-repeat top right;
and modify your image to incorporate a 10px border on the top and right in a transparent color
并修改您的图像以在透明颜色的顶部和右侧加入 10px 边框
回答by Rahul
You can use percentages:
您可以使用百分比：
background: url(...) top 98% no-repeat;
If you know the width of the parent div it should be pretty easy to determine what percentage you need to use.
如果您知道父 div 的宽度，那么确定需要使用的百分比应该很容易。
回答by Hichem ben chaabene
You can fake the space on the right hand side with a border in pixels (white most of the time or maybe something else)
您可以使用像素边框来伪造右侧的空间（大多数情况下为白色或其他）
background-image: url(../images/calender.svg) center right
border-right: 5px white solid
回答by ceejayoz
One solution is to absolutely position an empty div, and give that the background. I don't believe there's a way to do it purely with CSS, no changes to the image, and no extra markup in a fluid layout.
一种解决方案是绝对定位一个空的div，并为其提供背景。我不相信有一种方法可以完全使用 CSS，不对图像进行更改，并且在流畅的布局中没有额外的标记。
回答by Teatra.co
The correct format is:
正确的格式是：
background: url(YourUrl) 0px -50px no-repeat;
Where 0pxis the horizontal position and -50pxis the vertical position.
哪里0px是水平位置，哪里是-50px垂直位置。
CSS background-positionaccepts negative values.
CSSbackground-position接受负值。
