HTML背景图像从中心偏移x像素_Html_Css

HTML背景图像从中心偏移x像素

html css

HTML背景图像从中心偏移x像素,html,css,Html,Css,我想把一个图像作为一个网页的背景，但有一些像素相对于中心偏移我该怎么做我想： background-image: url("bg.png"); background-position: 25% center; background-attachment: fixed; background-repeat: no-repeat; 但是我想要的不是25%，而是类似于“中心-50px”的东西。有什么解决办法吗？所以你希望它的中心向左移动50个像素。我会以透明空间的形式将50个像素添加到图像中，除

我想把一个图像作为一个网页的背景，但有一些像素相对于中心偏移

我该怎么做

我想：

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

但是我想要的不是25%，而是类似于“中心-50px”的东西。有什么解决办法吗？

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

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

例如：

background-position: 25% 50%;

编辑：

我只是重新阅读了您的查询，唯一的方法是知道绝对位置（假设外部元素不是动态/灵活的），或者如果您不知道位置，可以使用javascript设置其位置。

没有明显的CSS答案。您要么需要使用JavaScript计算值，要么需要做一些棘手的事情。您可以尝试保持

背景位置：25%中心

并添加

位置：相对；左：-50px

或

边距左：-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>


身体{
宽度：100%；
溢出：隐藏；
}
#背景{
位置：绝对位置；
背景：url（images/background.jpg）居中顶部；
}
函数重新中心（）{
var$pos=$（'#content'）.offset（）.left；
$（'#bg'）.css（'left'，$pos-580）；
}
重新居中（）；
$（窗口）.resize（函数（）{recenter（）；}）；
废话

我相信我有一个解决方案可以满足您的需求：

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

这只使用HTML和CSS工作-不需要javascript

更新现在可以使用
背景位置
和
计算
作为CSS单元轻松实现这一点。

以下CSS将实现与前一个解决方案相同的结果（请参见下面的“原始解决方案”）：

注意：如果您需要支持旧版IE，请不要使用此方法

原液这样做的目的是将整个容器水平移动指定的量（在本例中是向左移动100px）。因为背景图像相对于容器居中，所以它随容器一起向左移动

填充修复了移动后出现在容器右侧的100px空白空间。背景图像通过填充显示）。由于浏览器使用边框框值而不是默认的内容框值来计算背景大小和位置，因此背景图像将有效地移回右侧50px，即填充距离的一半。（感谢埃里克的澄清）

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

我在这里为您准备了一个示例页面：

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

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

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

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

请注意，您不能这样做，也就是说，您需要计算（BgWidth-50），然后在那里写入数字

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

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

$(#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%;

或

示例具有相同的效果。

使用

背景位置：中心与背景位置相同：50%50%
因此，您可以使用calc
在CSS中进行一些简单的数学运算，以替换任何长度值，例如：
background-position: calc(50% - 50px) 50%;

将背景图像居中，但将其向左移动50像素。
是否将图像向左或向右移动，并在其周围保留空白？在将其设置为背景图像之前，能否修改图像并在其右侧添加50像素的空间？或者它是一个更复杂的图像？如果你想从左或右移动-CSS3（imo更好的解决方案）在这里：你不能在jpeg中有透明度。是的，但在gif和png中你可以。OP有一个png声明，有时可行的解决方法是用背景颜色代替我的方法，而不是透明。我需要一些睡眠，我可以发誓它有.jpg，在这种情况下它是有效的；）这应该是正确的答案。当然，另一个答案是，在图像中添加负空间以实现偏移是可行的，但从“如何仅使用代码实现此效果”的角度来看，这更为正确。从技术上讲，填充不会像您所述的那样“增加容器的总宽度”。您的修复仍然有效，因为背景图像是通过填充显示的，因此所有浏览器（显然是特别地）都使用边框框而不是内容框来计算背景大小和位置。一般来说，在Internet Explorer中，填充只会“增加整个容器的宽度”，因为它使用框大小：边框框
而不是其他浏览器使用的框大小：内容框。值得注意的是，这只允许您将图像移向左侧。这对我来说非常适合向左走，但是如果你向右走，会拉伸页面。这个解决方案在固定的背景附件中可以工作吗？填充物和位置
background-position: calc(50% - 50px) 50%;