延伸到頁面高度的:: after和:: before偽元素的背景圖像

Question

我有一個<div class="page">以我的頁面為中心，我想在此元素的左右邊緣放兩個背景圖像。

我已經設置了.page::before和.page::after偽元素，它們看起來很不錯，但是背景圖像會在視覺視口的末端而不是整個頁面重復出現。

我嘗試了幾件事，使用div的position:...或將height: 100%設置height: 100%設置為html和/或body但無濟於事。

我在這里做了一個JsFiddle演示來說明問題。 理想情況下，我不希望弄亂html標記。

有任何想法嗎？

編輯 ：在此處包括標記和CSS，以供將來參考。

HTML ：

<div class="page">__long content here__</div>

CSS

.page {
    background-color: white;
    width: 400px;
    margin: 0 auto;
    padding: 1em;
}

.page::before {
    content: '';
    background-image: url(__some background image__);
    position: absolute;
    width: 94px;
    height: 100%;
    top: 0;
    margin-left: -100px;
}

.page::after {
    content: '';
    background-image: url(__some background image__);
    position: absolute;
    width: 94px;
    height: 100%;
    top: 0;
    margin-left: 995px;
}

Answer 1

定位.page相對似乎有效 ：

.page {
    position: relative;
    background-color: white;
    width: 400px;
    margin: 0 auto;
    padding: 1em;
}

如果沒有它，那么height: 100%在其偽元素上的height: 100%是指視口的高度，因為它們是絕對放置的。