Question

上

我的HTML文档中有<header>和<section>。

标题中有一个褪色的背景图像，如果您在页面的下方加载新图像时发生的情况，即在部分中，该网站直接跳回到顶部。

有什么方法可以解决这个问题吗？

我已经尝试了一些CSS修复和喜欢，但只是没有运气。

jQuery：

    var counter = 0;

// Playthrough Background Images
    var imgArray = ['http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img/home/banner1.jpg',
        'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img//home/banner2.jpg',
        'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img//home/banner3.jpg',
        'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img/home/banner4.jpg'
    ]
    var nextBG = "url(" + imgArray[counter] + ")";

    $('.home-page').css("background-image", nextBG);

    setInterval(function(){
        counter++;
        nextBG = "url(" + imgArray[counter % imgArray.length] + ")";
        $('.home-page').fadeOut('fast', function() {
            $(this).css("background-image", nextBG).fadeIn('fast'); })
    }, 4000); // 4 second interval

CSS

#header {
    overflow:hidden;
    height:auto;
    background-position: center center;
    background-repeat: no-repeat;
    height:100%;
    position: relative;
}
.no-touch #header {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
}

由于

编辑我会添加一个jsFiddle，但该网站是在PyroCMS中构建的，需要一段时间才能拼凑起来。

Answer 1

使用z index css属性如下

.no-touch #header {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    zindex:1000; or zindex:-1000;
}

哪个更适合

背景图片播放 - 使页面移回顶部

1 个答案: