html - 延伸到页面高度的::after 和::before 伪元素的背景图像

Question

我有一个 <div class="page">以我的页面为中心，我希望在该元素的左右边缘有两个背景图像。

我已经设置了 .page::before和 .page::after伪元素，它们似乎工作得很好，但背景图像会重复出现在视觉视口(viewport)的末尾，而不是整个页面。

我尝试了几种方法，使用 position:...的 div ，或设置 height: 100%至 html和/或 body但无济于事。

我做了一个 JsFiddle demo here来说明问题。理想情况下，我不想弄乱 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 seems to work :

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

没有它，它的伪元素上的 height: 100% 指的是视口(viewport)的高度，因为它们是绝对定位的。