我想将一张图片作为网页的背景，但让它相对于中心偏移一些像素。
我该怎么做？
我想要：
background-image: url("bg.png");
background-position: 25% center;
background-attachment: fixed;
background-repeat: no-repeat;
但我想要的不是 25%，而是“中心 - 50px”。有什么解决办法吗？
【问题讨论】：
我相信我有一个可以实现您想要的解决方案：
背景图像（特别是页面背景）相对于中心偏移了多个像素。
这仅使用 HTML 和 CSS 工作 - 不需要 javascript。
现在可以使用 background-position 和 calc 作为 CSS 单元轻松实现。
以下 CSS 将实现与之前解决方案相同的结果（请参阅下面的“原始解决方案”）：
#background-container {
width: 100%;
background-image: url("background-image.png");
background-position: calc(50% - 50px) 50%;
background-repeat: no-repeat;
}
注意：如果您需要支持旧版 IE，请勿使用此方法。
#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;
}
它的作用是将整个容器水平移动指定的量（在本例中为向左 100 像素）。因为背景图片相对于容器居中，所以它会随着容器向左移动。
内边距修复了由于移动而出现在容器右侧的 100 像素空白区域。背景图像通过填充显示）。因为浏览器使用边框值而不是默认的内容框值来计算背景大小和定位，所以背景图像有效地向右移动了 50 像素 - 填充距离的一半。 （感谢 ErikE 的澄清）。
所以你的偏移/填充必须是所需偏移距离的两倍。
我在这里为您准备了一个示例页面： http://www.indieweb.co.nz/testing/background-offset-center.html
尝试调整窗口大小。您会看到紫色和蓝色背景图片（覆盖在标记页面中心的较深背景图片上）与页面中心左侧正好保持 50 像素（偏移/填充距离的一半）。
【讨论】：
box-sizing: border-box 而不是其他浏览器使用的 box-sizing: content-box。
background-position: top calc(50% - 50px)，但我发现background-position-x: calc(50% - 50px) 工作得很好（至少在 Chrome 60 中）跨度>
使用background-position: center; 与background-position: 50% 50%; 相同。
所以你可以使用calc 在 CSS 中做一些简单的数学运算来代替任何长度值，例如：
background-position: calc(50% - 50px) 50%;
将背景图片居中，但将其向左移动 50 像素。
【讨论】：
calc() 目前被认为是实验性的，而不是universally supported。
calc() 有很好的支持：d.pr/i/GrAk
background-position-x 和 background-position-y 明确）。那么也许它已经修复或仅适用于某些情况？
所以你希望它通过向左移动 50 个像素来居中。我会以透明空间的形式将 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*/
}
【讨论】：
我的回答肯定为时已晚，但不知何故我找到了另一个解决方案。
padding-left: 100px; /* offset you need */
padding-right: 100%;
或
padding-right: 100px;
padding-left: 100%;
例子效果一样。
【讨论】：