Css 视差图像加载良好，但悬停在上方时会跳到中心

我有一个奇怪的错误，我今天一直在试图修复——仍然没有运气。 如果你看下面的例子

下面是发生的情况。全宽背景图像加载到正确的位置，沿y轴居中。然后，当我们将鼠标悬停在图像上时，整个图像会跳到中间，然后慢慢地将自身调整回正常的所需位置

造成这种情况的原因是

左侧：50%；左边距：-960px。这使我们能够在开始时正确地将图像居中。如果没有这个CSS，悬停将不会跳转，但是图像将在浏览器的左上角加载锚定

在上面的链接中，红色框是content div。蓝色框是一些与
背景图像视差的文本

以下是我试图实现的目标：

使背景图像居中显示
当用户将鼠标悬停在背景图像上时，它不会跳转到页面中间
最后，减小用户能够在x轴上“视差”的宽度。现在的情况是，如果足够耐心，用户可以看到图像的左右两侧。我希望视差非常微妙
另外，我正在使用jParallax，可以在这里找到：


谢谢你的帮助
 一旦您通过CSS为背景图像设置了位置，jQuery视差插件似乎会改变这些设置。然后，解决方案是在jQuery视差处理了视差层之后应用这些设置

首先，从
视差层#background
类中删除
左边距
和
左边距

.视差层#背景{
背景图像：url（'../images/bg.jpg'）；
背景重复：无重复；
背景位置：中底；
宽度：1920像素；
高度：620px；
}

理想情况下，使用相同的方法将蓝色框居中（除非您希望它部分脱离屏幕）。我还删除了基于HTML的非必要CSS

.视差层#标语{
背景颜色：蓝色；
宽度：400px；
高度：400px；
}

最后，添加从背景和标语选择器中删除的CSS规则，以便在jQuery Parallax操作这些项目后应用它们

jQuery（文档）.ready（函数（）{
jQuery（“#视差。视差层”）
.视差({
mouseport:jQuery（'body'）
});
css（{marginLeft:“-960px”，左：“50%”，下：“0px”}）；
css（{marginLeft:“-200px”，左：“50%”）；
});

当鼠标进入视口时，您将不再看到背景图像左侧的大白色部分（主体背景色）

这个jQuery Parallax插件按照设计将所有内容对齐。如果鼠标进入
从蓝色框右侧的视口中，该框将正确设置到该位置的动画

但是，如果鼠标从蓝色框的左侧进入，该框将“跳转”到光标位置。您可以考虑删除上面的jQuery行，这样蓝色框在浏览器加载时是上/左的，或者使用较低的百分比值，如<强>代码> 25% < /代码> <强> > /p>

对于那些找到这个问题/答案并希望使用一些真正的标记的人，我设置了两个JSFIDLE。一个JSFIDLE复制了这个问题，另一个有如上所示的解决方案




两个jsfiddle都处于全屏模式，因此可以看到视差效果

查看原始问题的说明：

1。启动上述原始问题JSFIDLE链接。

2。按下JSFIDLE Play按钮，小心不要进入视口。如果蓝色盒子以任何方式移动。。。您已进入视口，请再次按“播放”按钮。

3。从视口的顶部/左侧进入，您将看到问题。。。HTML正文（白色）被视为背景图像自行调整。

4。随时按播放按钮重置网页。

要查看已应用的修复，请启动上面的链接或在浏览器地址栏上修改URL，以便看到该JSFIDLE的修订版1。（即，
http://jsfiddle.net/UG4Sq/1/embedded/result/
）

蓝色框通过文本指示您要查看的内容。干杯
 非常感谢您看这个！这解决了我的问题。现在我能想到的唯一一件事是——有没有办法告诉jParallax对齐背景图像中心底部？请参见上面编辑的jQuery
#background
选择器。干杯谢谢你的坚持！我已经插入了
底部：“0px”
，但它似乎没有解决问题——图像仍然捕捉到左上角。我已经减慢了动画的速度，所以你可以更好地看到。我已经将更改上传到了我是否遗漏了什么？啊，我看到你的观点，我之前的解释不清楚（请参见上面的“然而…”）。我最近提供的更改是正确对齐背景图像的底部。鼠标进入视口后会进行计算，所以看起来您必须使用插件的操作方式，但我有两个想法可以缓解这个问题。。。这是我的工作。示例1：在具有居中图像的部分之前具有其他视差内容。例如，其他内容可以平铺/实体。然后，由于鼠标光标位于视口中。。没有看到任何快照。示例2：使整个网页被淡入淡出的屏幕覆盖，该屏幕要求用户按一个按钮进行交互。此页面位于退出视差站点的顶部，因此本质上看不到快照，因为它发生在该屏幕下。