HTML 背景图像从中心偏移 x 像素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5981842/
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
HTML background image offset by x pixels from the center
提问by rhombidodecahedron
I'd like to put an image as the background of a webpage but have it offset by some number of pixels with respect to the center.
我想将图像作为网页的背景，但让它相对于中心偏移一定数量的像素。
How can I do this?
我怎样才能做到这一点？
I want:
我想要：
background-image: url("bg.png");
background-position: 25% center;
background-attachment: fixed;
background-repeat: no-repeat;
but instead of 25%, I want something along the lines of "center - 50px". Is there any solution to this?
但不是 25%，我想要一些类似“中心 - 50 像素”的东西。有什么解决办法吗？
回答by Luke
I believe I have a solution that achieves what you're wanting:
我相信我有一个解决方案可以实现您想要的：
A background image (specifically a page background) offset by a number of pixels with respect to the center.
背景图像（特别是页面背景）相对于中心偏移多个像素。
This works using only HTML & CSS - no javascript required.
这仅适用于 HTML 和 CSS - 不需要 javascript。
Update
更新
This can now be easily achieved using background-positionand calcas a CSS unit.
这现在可以使用可以轻松实现background-position，并calc作为一个单位的CSS。
The following CSS will achieve the same outcome as the previous solution (see "Original Solution" below):
以下 CSS 将实现与先前解决方案相同的结果（请参阅下面的“原始解决方案”）：
#background-container {
width: 100%;
background-image: url("background-image.png");
background-position: calc(50% - 50px) 50%;
background-repeat: no-repeat;
}
Note:Don't use this method if you require support for legacy versions of IE.
注意：如果您需要对旧版 IE 的支持，请不要使用此方法。
Original Solution
原始解决方案
#background-container {
width: 100%;
left: -100px; /* this must be TWICE the required offset distance*/
padding-right: 100px; /* must be the same amount as above */
background-image: url("background-image.png");
background-position: center;
background-repeat: no-repeat;
}
What this does is moves the the entire container horizontally by the amount specified (in this case to the left 100px). Because the background image is centered relative to the container it moves to the left with the container.
这样做是将整个容器水平移动指定的量（在本例中向左移动 100 像素）。因为背景图像相对于容器居中，所以它与容器一起向左移动。
The padding fixes the 100px of blank space that would appear to the right of the container as a result of the move. Background images show through padding). Because browsers use the border-box value instead of the default content-box value to calculate background sizing and positioning, the background image is effectively moved back to the right 50px - half the distance of the padding. (Thanks to ErikE for clarification).
填充修复了移动后会出现在容器右侧的 100 像素的空白空间。背景图像通过填充显示）。因为浏览器使用 border-box 值而不是默认的 content-box 值来计算背景大小和定位，背景图像被有效地向右移动了 50 像素 - 填充距离的一半。（感谢 ErikE 的澄清）。
So your offset/padding must be twice the required offset distance.
因此，您的偏移/填充必须是所需偏移距离的两倍。
I have prepared a sample page for you here: http://www.indieweb.co.nz/testing/background-offset-center.html
我在这里为您准备了一个示例页面：http: //www.indieweb.co.nz/testing/background-offset-center.html
Have a play with resizing the window. You will see that the purple and blue background image (laid over a deeper background image marking the center of the page) remains exactly 50px (half the offset/padding distance) to the left of the page center.
尝试调整窗口大小。您将看到紫色和蓝色背景图像（位于标记页面中心的更深背景图像上）在页面中心左侧保持 50 像素（偏移/填充距离的一半）。
回答by hynick
Using background-position: center;is the same as background-position: 50% 50%;.
使用background-position: center;与background-position: 50% 50%;.
So you can use calcto do some simple math in CSS as a replacement for any length value, for example:
所以你可以用calcCSS 做一些简单的数学运算来代替任何长度值，例如：
background-position: calc(50% - 50px) 50%;
Will center the background image, but shift it 50 pixels to the left.
将背景图像居中，但将其向左移动 50 像素。
回答by Dustin Laine
So you want it centered by shifted 50 pixels to left. I would add the 50 pixels to the image in the form of a transparent space, unless you are dealing with absolute dimensions.
所以你希望它通过向左移动 50 个像素来居中。我会以透明空间的形式将 50 像素添加到图像中，除非您处理的是绝对尺寸。
回答by Jeff
There's no obvious CSS answer. You would either need to use JavaScript to calculate values or do something tricky. You can try keeping the background-position:25% centerand adding position:relative;left:-50pxor margin-left:-50pxbut those might not work depending on how you are using the DOM element.
没有明显的 CSS 答案。您要么需要使用 JavaScript 来计算值，要么做一些棘手的事情。您可以尝试保留background-position:25% center和 添加position:relative;left:-50px或margin-left:-50px但这些可能不起作用，具体取决于您使用 DOM 元素的方式。
回答by neokio
The only method I've found for this is to have the background inside another div, then use javascript to reposition ...
我为此找到的唯一方法是将背景放在另一个 div 中，然后使用 javascript 重新定位...
<style>
body {
width: 100%;
overflow: hidden;
}
#bg {
position: absolute;
background: url(images/background.jpg) center top;
}
</style>
<script>
function recenter(){
var $pos = $('#content').offset().left;
$('#bg').css('left',$pos-580);
}
recenter();
$(window).resize(function(){ recenter(); });
</script>
<body>
<div id="bg"></div>
<div id="content">
blah
</div>
</body>
回答by Jonathan J
if you know the width of the image you can use this:
如果你知道图像的宽度，你可以使用这个：
background-position: (BgWidth - 50)px 0px;
Note that you can't have it like that, i.e. you need to calculate (BgWidth - 50) and then write the number there.
请注意，您不能这样做，即您需要计算 (BgWidth - 50) 然后在那里写下数字。
If you don't know the width you can use Javascript(with-or-without jQuery) and then use this:
如果您不知道宽度，您可以使用 Javascript（有或没有 jQuery），然后使用这个：
$(#ID).css('background-position', (BgWidth - 50)+'px 0px');
回答by Mohd Sakib
Nice answer Luke,
很好的答案卢克，
one more thing, if your block width is larger than screen resolution, your must put your block in another container and do this:
还有一件事，如果您的块宽度大于屏幕分辨率，您必须将您的块放在另一个容器中并执行以下操作：
#container{
position:relative;
overflow:hidden;
}
#shadowBox{
width: 100%;
left: -100px; /* this must be TWICE the required offset distance*/
padding-right: 100px; /* must be the same amount as above */
background-image: url("background-image.png");
background-position: center;
background-repeat: no-repeat;
position:absolute: /*this is needed*/
}
回答by Jan Iwanow
My answer gotta be too late but somehow I've found another solution.
我的回答为时已晚，但不知何故我找到了另一个解决方案。
padding-left: 100px; /* offset you need */
padding-right: 100%;
or
或者
padding-right: 100px;
padding-left: 100%;
The examples have the same effect.
这些示例具有相同的效果。
回答by HymanJoe
the units need to be the same, so when specifying pixels for the x-position, the y-position needs to be also in pixels.
单位必须相同，因此在为 x 位置指定像素时，y 位置也需要以像素为单位。
example:
例子：
background-position: 25% 50%;
EDIT: I just re-read your query and the only way to do that is either knowing the absolute position (assuming the outer elements aren't dynamic/flexible), or in case you don't know the position, maybe use javascript to set its position.
编辑：我只是重新阅读了您的查询，唯一的方法是知道绝对位置（假设外部元素不是动态/灵活的），或者如果您不知道位置，可以使用 javascript设置它的位置。
