html文字移到背景图中心,HTML背景图片从中心偏移x像素

我相信我有一个解决方案，实现你想要的：

相对于中心偏移了多个像素的背景图像(特别是页面背景)。

这只使用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;

}

这是做水平移动整个容器的量指定(在这种情况下向左100px)。因为背景图像相对于容器居中，所以它与容器一起向左移动。

填充修复了移动后容器右侧出现的100px空白空间。背景图像通过填充显示)。因为浏览器使用border-box值而不是默认的content-box值来计算背景尺寸和定位，所以背景图像被有效地移回右边50px – 填充距离的一半。 (感谢ErikE的澄清)。

因此，您的偏移/填充必须是所需偏移距离的两倍。

有一个玩调整窗口大小。您将看到紫色和蓝色背景图像(放置在更深的背景图像标记的页面中心)保持精确地50px(偏移/填充距离的一半)在页面中心的左边。