Question

嗨，我一直试图找到一个解决这个问题很长一段时间没有运气。基本上，无论我做什么，背景视差图像都不会也不会居中，See Here!背景图像的大小是2000像素×1333像素，看起来like this.这就是我的HTML设置方式：< / p>

<section id="featurette" data-type="background" data-speed="5">
            <div class="container">
                <div class="row">
                    <div class="col-sm-8 col-sm-offset-2">
                        <h2>Watch the Course Introduction</h2>
                    </div>
                </div>
            </div>
</section>

CSS样式表：

#featurette {
    background: url('../img/stuff-bg.jpg') center center repeat fixed;
    background-size: cover;
    color: white;
}

和Java脚本：

$(function() {

    // Cache the Window object
    var $window = $(window);

    // Parallax Backgrounds
    // Tutorial: http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641



$('section[data-type="background"]').each(function(){
        var $bgobj = $(this); // assigning the object

        $(window).scroll(function() {

            // Scroll the background at var speed
            // the yPos is a negative value because we're scrolling it UP!                              
            var yPos = -($window.scrollTop() / $bgobj.data('speed'));

            // Put together our final background position
            var coords = '50% '+ yPos + 'px';

            // Move the background
            $bgobj.css({ backgroundPosition: coords });

        }); // end window scroll
    });

});

如果有人知道它为什么不起作用，那么如果你能帮助我，我会非常感激。

Answer 1

试试这个，让我知道是否有任何问题。

#featurette {
    background: url('../img/stuff-bg.jpg');
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: white;
}

视差背景图像不居中

1 个答案: