Javascript Html5UP强调了变化。如何改变背景行为？

我正试图对HTML5UP亮点网站做一些修改。您可以从这里的预览中看到，当您向下滚动到页面的下一部分时，背景图像会发生如下变化：

然后，如果调整窗口大小，将显示原始背景图像，第二个图像将包含在内容中，如下所示：

我正试图找出背景图像在第一个屏幕截图中是如何变化的。无论屏幕大小如何，我总是试图在第二个屏幕截图中显示原始背景，并且总是在内容中包含子图像。基本上，我尝试在所有屏幕大小中模拟第二个屏幕截图

我可以看到CSS中针对不同屏幕大小的部分：

 @media screen and (max-width: 980px) {    
    .main .image.primary {
                        display: block;
                        margin: 0 0 4em 0;
        }
    }

所以我也对主版本做了修改，并注释掉了display:none

.main .image.primary {
        /*display: none; */
        display: block;
        margin: 0 0 4em 0;
    }

---

无论屏幕截图如何，这似乎都会添加内容图像，但我无法确定屏幕调整时背景图像会发生什么变化？

第一部分：删除背景过渡

要禁用背景转换效果，请查看

assets/js/main.js

文件。您将找到一个带有注释的部分标题

//主要部分。

（第156行+）。稍微低一点，您会发现以下内容：

// Create bg and append it to body.
    $bg = $('<div class="main-bg" id="' + $this.attr('id') + '-bg"></div>')
        .css('background-image', (
            'url("css/images/overlay.png"), url("' + $primaryImg.attr('src') + '")'
        ))
        .appendTo($body);

您只需删除或注释该部分，过渡效果就会消失

第二部分：始终显示内容图像

在这里，您已经在

assets/css/main.css

文件中找到了正确的位置。刚定

.main .image.primary {
    display: block;
}

并删除“最小高度”属性：

.main .container:before {
    /*min-height: calc( 100vh - 13em );*/
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1px;
}

不，一切都应该作为你的第二张截图

.main .container:before {
    /*min-height: calc( 100vh - 13em );*/
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1px;
}