Question

我想将图片作为网页的背景，但是相对于中心偏移了一些像素数。

我该怎么做？

我想：

background-image: url("bg.png");
background-position: 25% center;
background-attachment: fixed;
background-repeat: no-repeat;

但不是25％，我想要的东西是“中心 - 50px”。这有什么解决方案吗？

Answer 1

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

相对于中心偏移了若干像素的背景图像（特别是页面背景）。

这仅适用于HTML＆amp; 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空白区域。背景图像通过填充显示。因为浏览器使用边框值而不是默认的内容框值来计算背景大小和位置，所以背景图像有效地移回到右边50px - 填充距离的一半。（感谢ErikE的澄清）。

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

我在这里准备了一个示例页面： http://www.indieweb.co.nz/testing/background-offset-center.html

玩一个调整窗口大小的游戏。您将看到紫色和蓝色背景图像（放置在标记页面中心的较深背景图像上）保持在页面中心左侧的50px（偏移/填充距离的一半）。

Answer 2

使用background-position: center;与background-position: 50% 50%;相同。

所以你可以使用calc在CSS中做一些简单的数学运算来代替任何长度值，例如：

background-position: calc(50% - 50px) 50%;

将背景图像居中，但将其向左移50像素。

Answer 3

所以你希望它向左移动50像素居中。除非您处理绝对尺寸，否则我会以透明空间的形式向图像添加50个像素。

Answer 4

没有明显的CSS答案。您可能需要使用JavaScript来计算值或做一些棘手的事情。您可以尝试保留background-position:25% center并添加position:relative;left:-50px或margin-left:-50px，但这些可能无效，具体取决于您使用DOM元素的方式。

Answer 5

我找到的唯一方法是将背景放在另一个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>

Answer 6

如果您知道图像的宽度，可以使用它：

background-position: (BgWidth - 50)px 0px;

请注意，你不能这样，即你需要计算（BgWidth - 50），然后在那里写下数字。

如果您不知道宽度，可以使用Javascript（带或不带jQuery），然后使用它：

$(#ID).css('background-position', (BgWidth - 50)+'px 0px');

Answer 7

很好的答案卢克，

还有一件事，如果您的块宽度大于屏幕分辨率，您必须将块放在另一个容器中并执行此操作：

#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*/
}

Answer 8

我的回答太迟了但不知怎的，我找到了另一个解决方案。

padding-left: 100px; /* offset you need */
padding-right: 100%;

或

padding-right: 100px;
padding-left: 100%;

这些例子具有相同的效果。

Answer 9

单位必须相同，因此在指定x位置的像素时，y位置也需要以像素为单位。

示例：

background-position: 25% 50%;

编辑：我只是重新阅读你的查询，唯一的方法就是知道绝对位置（假设外部元素不是动态/灵活的），或者如果你不知道位置，也许使用javascript来设置它位置。

HTML背景图像偏离中心x像素

9 个答案:

更新

原始解决方案