Html5UP突出顯示更改。 如何改變背景行為？

Question

我正在嘗試對HTML5UP Highlights網站進行一些更改。 您可以在預覽中看到https://html5up.net/highlights ，當您向下滾動到頁面的下一部分時，背景圖像會發生如下變化：

然后，如果您調整窗口大小，則會顯示原始背景圖像，並且第二個圖像將包含在內容中，如下所示：

我正在嘗試弄清楚第一個屏幕截圖中背景圖像的變化。 我試圖始終在第二個屏幕截圖中顯示原始背景，無論屏幕大小如何，並始終在內容中包含子圖像。 基本上我試圖模仿所有屏幕尺寸的第二個屏幕截圖。

我可以看到CSS中有不同屏幕尺寸的這些部分：

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

所以我也為Main版本更改了這個，並注釋掉display：none。

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

這似乎添加了內容圖像，無論截圖，但我無法弄清楚屏幕上的背景圖像的大小調整大小？

Answer 1

第1部分：刪除背景過渡

要禁用后台過渡效果，請查看assets/js/main.js文件。 你會在評論// Main sections.找到一個部分標題// Main sections. （第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);

這將為背景圖像創建一個元素，該元素取決於當前元素。

之后，您將找到添加/刪除此元素的代碼，無論是否有轉換（第194+行）：

if (skel.canUse('transition')) {

    options.init = function() { $bg.removeClass('active'); };
    options.enter = function() { $bg.addClass('active'); };
    options.leave = function() { $bg.removeClass('active'); };

}
else {

    $bg
        .css('opacity', 1)
        .hide();

    options.init = function() { $bg.fadeOut(0); };
    options.enter = function() { $bg.fadeIn(400); };
    options.leave = function() { $bg.fadeOut(400); };

}

您可以刪除或評論該部分，過渡效果應該消失。

第二部分：始終顯示內容圖像

在這里，您已經在assets/css/main.css文件中找到了正確的位置。 剛設置

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

並刪除min-height屬性：

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

沒有什么可以作為你的第二個截圖。