Question

我正在使用Backstretch.js和Wordpress网站中的自定义字段动态应用全屏背景图片。

它对于身体背景图像工作正常，但我在页面上还有另一个元素，背景图像由CSS设置，而backstretch似乎搞乱了它，但仅限于Chrome。

当页面加载时，两个背景图像显示正常，但是当我向下滚动页面时，css背景消失 - 有时完全消失，有时只是随机部分消失。如果我删除backstretch然后CSS bg表现正常。理想情况下，我也希望它们都能被修复。

直道

<?php $image = get_post_meta($post->ID, 'wpcf-background-image', TRUE); ?>
    <?php if ( ! empty ( $image ) ) { ?>
        <script>
            jQuery.backstretch("<?php echo $image ?>");
        </script>
<?php } ?>

CSS

.full-grey-cover {
overflow: hidden;
background-image: url(images/menu-bg-2.jpg) !important;
background-repeat: no-repeat !important; 
background-size: cover !important;
background-position: center !important;
background-attachment: fixed !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;

}

我目前使用backstretch为背景设置了2页。

http://ffionas.ashfordweb.co.uk/

和

http://ffionas.ashfordweb.co.uk/brunch

似乎在FF和Safari中工作正常但在Chrome（Mac / Mavericks）中没有。令人讨厌，因为我只需要使用后伸，因为固定的BG在IOS设备上会很好用。

<磷>氮

Answer 1

Chrome上次更新（38.0.2125.101 m）后，我遇到了与backstretch相同的问题。调试后我发现它是.backstretch类的负z-index值，这弄乱了我的网站。将z-index更改为1并将我的包装类更改为position：relative with z-index：2后，所有内容都会恢复正常。希望它有所帮助！

Answer 2

此解决方案适合我。

您需要在Backstretch.js中添加此代码范围

$('body').wrapInner('<div id="backstreach-fix" style="z-index: 1; position: relative;">');

后面的 a.fn.backstretch 中的

0 === a(d).scrollTop() && d.scrollTo(0, 0);

我还需要在此文件中更改zIndex。

查找zIndex：-999998并更改为zIndex：1

查找zIndex：-999999并更改为zIndex：0

Answer 3

在单页网站（http://www.abarthpulizie.it/）中，我遇到了Neil Day描述的相同问题。我用两种方式使用Backstretch。首先，我使用动画滑块同步背景图像，使用Sweeper am animate.less css lib实现。其次，我同步背景更改并滚动到一个网页的各个部分。

在Chrome更新完成之前。 Backstretch停止正常工作后。

我尝试了Janusz Chodzicki解决方案（避免负面z-index）并进行了一些更正（我分叉了原始的Github项目：https://github.com/magicbruno/jquery-backstretch）但这只解决了第一个问题。

滚动页面时，结果很奇怪。固定背景卷轴，背景图像根本不显示或只是片刻或部分切割等...

最后我尝试删除了css规则＆＃34; -webkit-backface-visibility：hidden＆＃34; animate.less附加到身体，现在所有工作都像Chrome更新之前一样（alsa没有负面的z-index校正。

我希望这对某些人有用

backstretch导致chrome中的其他背景图像出现问题

3 个答案: