HTML背景图片从中心偏移x像素 [英] HTML background image offset by x pixels from the center
问题描述
我想将图片作为网页的背景，但是相对于中心偏移了一些像素。
我如何这是吗？
我想要的：
background-image：url （bg.png）;
background-position：25％center;
background-attachment：fixed;
background-repeat：no-repeat;
但我想要的是center - 50px。有没有解决方案？
我相信我有一个解决方案可以实现你想要的：
背景图片（特别是页面背景）相对于中心偏移了多个像素。
这只使用HTML& CSS - 无需javascript。
更新
现在可以使用 background-position 和 calc 作为CSS单位轻松实现。 p>
以下CSS将获得与上一个解决方案相同的结果（参见下面的原始解决方案）：
＃background-container {
width：100％;
background-image：url（background-image.png）;
background-position：calc（50％ - 50px）50％;
background-repeat：no-repeat;
}
注意：不要使用此方法if您需要支持旧版IE。
原始解决方案
＃background-container {
width：100％;
left：-100px; / *这必须是TWICE所需的偏移距离* /
padding-right：100px; / *必须与上面的值相同* /
background-image：url（background-image.png）;
background-position：center;
background-repeat：no-repeat;
}
这样做会将整个容器水平移动指定的量这种情况下向左边100px）。因为背景图片相对于容器居中，所以向左移动容器。
填充修复了100px的空白空间，容器作为移动的结果。背景图像通过填充显示）。因为浏览器使用border-box值而不是默认的content-box值来计算背景尺寸和定位，所以背景图像被有效地移回右边50px - 填充距离的一半。 （感谢ErikE的澄清）。
因此，您的偏移/填充必须是所需偏移距离的两倍。
我在这里为您准备了一个示例页面：
http ：//www.indieweb.co.nz/testing/background-offset-center.html
有调整窗口大小的游戏。您会看到，紫色和蓝色背景图片（放置在更深的背景图片标记的页面中心）保持精确地50px（偏移/填充距离的一半）在页面中心的左侧。
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?
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.
Update
This can now be easily achieved using background-position and calc as a CSS unit.
The following CSS will achieve the same outcome as the previous solution (see "Original Solution" below):
#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.
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.
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).
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
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.
这篇关于HTML背景图片从中心偏移x像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
