布局

Question

我想知道是否可以仅使用CSS来创建符合以下规格的视差滚动背景。

• 它适用于位于静态布局内的元素（即我的整个页面布局不是一组并行的项目）
• 背景并未完全固定;它移动，不像页面其他部分那么快。

我查了很多关于parallaxing背景的教程，并找到了一些看似很棒的教程，但它们都有下列问题之一。

1. 他们依赖于whole page being a parallax group，以便您通过＆＃34;溢出：自动＆＃34;实际滚动容器。说明书
2. 背景为totally fixed in place
3. they use JavaScript。

Sooo，我可以很容易地用JavaScript完成我想要的东西。这是您可以试用的full working example on JSFiddle。

CSS

.parallax-row {
  background-image: url(http://lorempixel.com/output/nature-q-c-781-324-3.jpg);
  background-size: auto 150%;
}

的JavaScript

/**
 * Update the parallaxing background img to partially scroll
 */
jQuery(document).ready(function($) {
    $(window).on('scroll', function() {
        $('.parallax-row').each(function(index, el) {
            var $el = $(el);
            var fromTop = $el.offset().top + ($el.outerHeight() / 2) - $(window).scrollTop();
            var windowHeight = $(window).height();
            var percent = (fromTop * 100 / windowHeight);

            $el.css('background-position', '0 ' + percent + '%');
        });
    });
});

是否可以使用 CSS实现相同的效果？