javascript - 圆形视差背景定位

Question

我正在使用脚本根据鼠标移动/手机移动将背景位置移动特定像素距离。但是，我无法想出一种始终让背景扩展包含 div 的整个宽度和高度的方法。该脚本确实可以根据鼠标移动来移动背景。但是它移动背景图像太多并且会导致出现空白。

看看 fiddle ，您就会明白我的意思。

fiddle :http://jsfiddle.net/K9Ae7/2/

HTML:

<section id="court-fitness" data-parallaxify-background-range="30"></section>

CSS:

#court-fitness {
height: 500px;
width: 100%;
background:url('https://www.tourresource.com/Board/Themes/SMF_Grunge/images/bg.jpg');
background-repeat: no-repeat;
}

JS:

        $('#court-fitness').hover(function () {
        $(this).parallaxify({
            parallaxBackgrounds: true,
            useMouseMove: true,
            useGyroscope: true,
            inputPriority: 'mouse'

        });
    },

    function () {
        $(this).parallaxify('destroy');
    });

脚本的其余部分在 fiddle 中。谢谢。

Answer 1

检查一下:

#court-fitness {
    height: 500px;
    width: 110%;
    margin-left: -5%;
    margin-top: -5%;
    background:url('https://www.tourresource.com/Board/Themes/SMF_Grunge/images/bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    z-index: -1;
}

Fiddle