将 CSS 背景图像从右侧放置 x 像素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3197250/
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
Position a CSS background image x pixels from the right?
提问by Doug
I think the answer is no, but can you position a background image with CSS, so that it is a fixed amount of pixels away from the right?
我认为答案是否定的，但是您可以使用 CSS 定位背景图像，使其与右侧相距固定数量的像素吗？
If I set background-positionvalues of x and y, it seems those only give fixed pixel adjustments from the left and top respectively.
如果我设置background-positionx 和 y 的值，它们似乎只能分别从左侧和顶部进行固定像素调整。
回答by Steven Mouret
background-position: right 30px center;
It works in most browsers. See: http://caniuse.com/#feat=css-background-offsetsfor full list.
它适用于大多数浏览器。有关完整列表，请参阅：http: //caniuse.com/#feat=css-background-offsets。
More information: http://www.w3.org/TR/css3-background/#the-background-position
更多信息：http: //www.w3.org/TR/css3-background/#the-background-position
回答by turda
It is possible to use attribute borderas length from the right
可以border从右边使用属性作为长度
background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;
回答by Valentin E
There is one way but it's not supported on every browser (see coverage here)
有一种方法，但并非每个浏览器都支持它（请参阅此处的报道）
element {
background-position : calc(100% - 10px) 0;
}
It works in every modernbrowser, but it is possible that IE9 is crashing. Also no coverage for =< IE8.
它适用于所有现代浏览器，但 IE9 可能会崩溃。也没有覆盖 =< IE8。
回答by Steven
As far as I know, the CSS specificationdoes not provide for exactly what you're asking, outside of CSS expressions, of course. Working off the assumption that you don't want to use expressions or Javascript, I see three hackish solutions:
据我所知，当然，CSS 规范并没有准确地提供您所要求的 CSS 表达式之外的内容。假设您不想使用表达式或 Javascript，我看到了三个 hackish 解决方案：
- Make sure your background image matches the size of the container (at least in width) and set
background-repeat: repeatorrepeat-xif only the width is equalized. Then, having something appearxpixels from the right is as simple asbackground-position: -5px 0px. - Using percentages for
background-positionexhibits special behaviour that is better seen than described here. Give it a shot. Essentially,background-position: 90% 50%will make the right edge of the background image line up 10% away from the right edge of the container. - Create a div containing the image. Explicitly set the position of the containing element
position: relativeif not already set. Set the image container toposition: absolute; right: 10px; top: 10px;, obviously adjusting the final two as you see fit. Place the image div container into the containing element.
- 确保您的背景图像匹配容器的大小（至少在宽度上）并设置，
background-repeat: repeat或者repeat-x如果仅宽度相等。然后，让某些东西x从右边出现像素就像 一样简单background-position: -5px 0px。 - 使用百分比来
background-position展示比此处描述的更好看的特殊行为。试一试。本质上，background-position: 90% 50%将使背景图像的右边缘与容器的右边缘对齐 10%。 - 创建一个包含图像的 div。
position: relative如果尚未设置，则显式设置包含元素的位置。将图像容器设置为position: absolute; right: 10px; top: 10px;，显然可以根据需要调整最后两个。将图像 div 容器放入包含元素中。
回答by ahwebd
Try this:
尝试这个：
#myelement {
background-position: 100% 50%;
margin-right: 5px;
}
Note though that the code above will move the whole element (not the background image only) 5px from the right. This might be ok for your case.
请注意，上面的代码会将整个元素（不仅仅是背景图像）从右侧移动 5px。这可能适合您的情况。
回答by Adrian Macneil
回答by Vivek Mhatre
Image workaround with transparent pixels on the right to serve as right margin.
使用右侧透明像素作为右边距的图像解决方法。
The image workaround for the same is to create a PNG or GIF image (image file formats that support transparency) which has a transparent portion on the right of the image exactly equal to the number of pixels that you want to give a right margin of (eg: 5px, 10px, etc.)
相同的图像解决方法是创建一个 PNG 或 GIF 图像（支持透明度的图像文件格式），它在图像右侧有一个透明部分，该部分完全等于您想要提供右边距的像素数（例如：5px、10px 等）
This works well consistently across fixed widths as well as widths in percentages. Practically a good solution for accordion headers having a plus/minus or up/down arrow image on the header's right!
这在固定宽度和百分比宽度上都能很好地保持一致。对于在标题右侧具有加/减或向上/向下箭头图像的手风琴标题来说，这实际上是一个很好的解决方案！
Downside: Unfortunately, you cannot use JPG unless the background portion of the container and the background color of the CSS background image are of the same flat color (with out a gradient/vignette), mostly white/black etc.
缺点：不幸的是，你不能使用 JPG，除非容器的背景部分和 CSS 背景图像的背景颜色是相同的平面颜色（没有渐变/小插图），主要是白色/黑色等。
回答by Mroz
If you happen to stumble on this topic in these days of modern browsers you can use pseudo-class :after to do practicaly anything with the background.
如果你碰巧在现代浏览器的这些日子里偶然发现了这个话题，你可以使用伪类 :after 对背景做任何实际的事情。
.container:after{
content:"";
position:absolute;
right:20px;
background:url(http://lorempixel.com/400/200) no-repeat right bottom;
}
this css will put background to bottom right corner of ".container" element with 20px space on the right side.
这个css会将背景放在“.container”元素的右下角，右侧有20px的空间。
See this fiddle for example http://jsfiddle.net/h6K9z/226/
参见这个小提琴例如http://jsfiddle.net/h6K9z/226/
回答by stedman
The most appropriate answeris the new four-value syntax for background-position, but until all browsers support ityour best approach is a combination of earlier responses in the following order:
在最合适的答案是背景，地位的新的四值的语法，但直到所有的浏览器都支持你的最好的办法是按以下顺序较早响应的组合：
background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */
回答by RMM
Just put the pixel padding into the image - add 10px or whatever to the canvas size of the image in photohop and align it right in CSS.
只需将像素填充放入图像中 - 在 photohop 中为图像的画布大小添加 10px 或其他任何内容，并在 CSS 中将其对齐。
