HTML背景图像偏离中心x像素
我想把一个图像作为网页的背景，但相对于中心偏移了一定数量的像素。
我怎样才能做到这一点？
我想要：
background-image: url("bg.png"); background-position: 25% center; background-attachment: fixed; background-repeat: no-repeat; 而不是25％，我想要的东西沿“中心 – 50px”的行。 有没有解决这个问题？
我相信我有一个解决scheme，实现你想要的东西：
背景图像（特别是页面背景）相对于中心偏移了多个像素。
这只能使用HTML和CSS – 不需要JavaScript。
更新
现在可以使用background-position和calc作为CSS单元轻松实现。
以下CSS将获得与以前的解决scheme相同的结果（请参阅下面的“原始解决scheme”）：
#background-container { width: 100%; background-image: url("background-image.png"); background-position: calc(50% - 50px) 50%; background-repeat: no-repeat; }
注意：如果您需要支持旧版本的IE， 请不要使用此方法。
原始解决scheme
#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; }
它所做的是将整个容器水平移动指定的数量（在本例中为左边100px）。 由于背景图像相对于容器居中，所以它随容器向左移动。
填充修复了作为移动结果出现在容器右侧的100像素的空白区域。 背景图像显示通过填充）。 由于浏览器使用边框值而不是默认的内容框值来计算背景大小和定位，所以背景图像被有效地移回到右边50px–填充距离的一半。 （感谢ErikE澄清）。
所以你的偏移/填充必须是所需偏移距离的两倍。
我在这里准备了一个样本页面： http : //www.indieweb.co.nz/testing/background-offset-center.html
调整窗口大小。 您将看到紫色和蓝色背景图像（放置在标记页面中心的较深的背景图像上）恰好保持在页面中心左侧50px（偏移/填充距离的一半）。
使用background-position: center; 与background-position: 50% 50%;相同background-position: 50% 50%; 。
所以你可以使用calc在CSS中做一些简单的math运算来代替任何长度值，例如：
background-position: calc(50% - 50px) 50%;
将居中的背景图像，但将其左移50个像素。
所以你想让它左移50个像素的中心。 我会以透明空间的forms将50个像素添加到图像中，除非您正在处理绝对尺寸。
没有明显的CSS答案。 你可能需要使用JavaScript来计算值或做一些棘手的事情。 您可以尝试保持background-position:25% center并添加position:relative;left:-50px或margin-left:-50px但这些可能无法正常工作，具体取决于您如何使用DOM元素。
唯一的方法，我发现这是有另一个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>
如果你知道图像的宽度，你可以使用这个：
background-position: (BgWidth - 50)px 0px;
请注意，你不能这样做，即你需要计算（BgWidth – 50），然后在那里写数字。
如果你不知道宽度，你可以使用Javascript（带或不带jQuery），然后使用这个：
$(#ID).css('background-position', (BgWidth - 50)+'px 0px');
好的回答卢克，
还有一件事，如果你的块宽度大于屏幕分辨率，你必须把你的块放在另一个容器中，然后执行下面的操作：
#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*/ }
我的答案太晚了，但不知何故，我find了另一种解决scheme。
padding-left: 100px; /* offset you need */ padding-right: 100%;
要么
padding-right: 100px; padding-left: 100%;
这些例子具有相同的效果。
单位需要相同，所以当为x位置指定像素时，y位置也需要以像素为单位。
例：
background-position: 25% 50%;
编辑：我只是重新读取您的查询，要做到这一点的唯一方法是知道绝对位置（假设外部元素不dynamic/灵活），或者如果你不知道的位置，也许使用JavaScript来设置其位置。
