SOURCE

console 命令行工具 X clear

                    
>
console
window.onload = function () {
    window.addEventListener('scroll', scrollHandler);
    function scrollHandler(e) {
        document.querySelectorAll('[data-type=background]').forEach(item => {
            var yPos = -(parseInt(document.documentElement.scrollTop) / parseInt(item.dataset.speed));
            var coords = '50% ' + yPos + 'px';
            item.style.backgroundPosition = coords
        })
    }
}
<div class="article section1" id="section1" data-speed="10" data-type="background">  
     每当我加班凌晨,独自一人走在黑暗的回家路上  
</div>  
<div class="article section2" id"section2" data-speed="20" data-type="background">  
     我会想起那天夕阳下的奔跑  
</div>  
/*统一设置背景的background-attchment属性*/  
.article{  
    width: 960px;  
    margin: 0 auto;  
    height: 800px;  
    padding: 40px;  
    font: 24px/1.5 'Microsoft YaHei';  
    background-repeat: no-repeat;  
    background-attachment: fixed;  
    background-position: 50% 0;  
    line-height:400px;   
}  
/*分别给每个部分设置不同的背景和颜色*/  
.section1{  
        background-size: 960px 900px;  
       color: white;  
       background-image: url(https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF);  
}  
.section2{  
        background-size: 960px 1000px;  
       color: #FF8500;  
       background-image: url( https://t7.baidu.com/it/u=825057118,3516313570&fm=193&f=GIF);  
}