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

Question

我在 Wordpress 站点中使用 Backstretch.js 和自定义字段来动态应用全屏背景图像。

它对主体背景图像工作正常，但我在页面上还有另一个元素，其背景图像由 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;

我目前有 2 个页面设置使用后向拉伸(stretch)作为背景。

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

和

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

似乎在 FF 和 Safari 中运行良好，但在 Chrome (Mac/Mavericks) 中运行不佳。很烦人，因为我只需要使用 backstretch，因为固定的 BG 在 IOS 设备上会很好地播放..

N.

Answer 1

在上次更新 Chrome (38.0.2125.101 m) 后，我遇到了同样的回退问题。调试后，我发现是 .backstretch 类的负 z-index 值弄乱了我的网站。 将 z-index 更改为 1 并将包装类更改为 position:relative 和 z-index:2 后，一切又恢复正常。 希望对您有所帮助!