无法让 Z-index 在同一 div 的背景下放置 ::after 背景。这可能吗？答案

【问题标题】：Can't get Z-index to put an ::after background under the background in the same div. Is this possible?无法让 Z-index 在同一 div 的背景下放置 ::after 背景。这可能吗？
【发布时间】：2015-08-02 11:27:41
【问题描述】：

我目前正在为 reddit 风格 (voat) 社区制作样式表。为了让背景图像在更大的显示器上继续出现在浏览器的整个宽度上，而不扭曲原始标题背景，我尝试添加第二个图像，它基本上会填充右侧的其余背景，所以没有留下空白。

由于我只使用 CSS 样式表而不是任何 html，因此我通过使用 ::after 元素添加了第二个背景。所以我有；

#header-container {
    background: url("snip");
    background-color: rgba(0,0,0,0);
    background-size: contain;
    position: absolute;
    height: 175%;
    width: 100%;
    background-repeat: no-repeat;
    top: 25%;
    border-color: #000000;
    z-index: 999;
}

#header-container:after {
    background: url("snip");
    content: "";
    position: absolute;
    background-repeat: repeat-x;
    top: 0%;
    left: 1268px;
    width: 100%; 
    height: 100%;
    border-color: #000000;
    z-index: 1;
    background-size: contain;
}

尽管有 z-index，但顺序并没有改变，在后面部分添加的第二个背景自动覆盖在第一个背景上。

有什么方法可以在不涉及 html 的情况下做到这一点。还是代码中的某些内容完全错误地阻止了它？我还尝试偏移底层背景（第二个）以将其从左侧偏移，因此它只覆盖了原始背景中缺失的部分背景（缩小时），但并不完全准确。我认为这是 background-size: contains; 行的错，但不确定。

对不起，任何帮助都非常感谢。

【问题讨论】：

你需要这样的jsfiddle.net/ytL7zgty吗？

标签： css background header z-index reddit

【解决方案1】：

只是猜测，但请尝试将额外的图像样式添加到 :before 伪元素：

#header-container:before {
    background: url("snip");
    content: "";
    position: absolute;
    background-repeat: repeat-x;
    top: 0%;
    left: 1268px;
    width: 100%; 
    height: 100%;
    border-color: #000000;
    background-size: contain;
}

...您可能可以摆脱两者中的z-index 设置。

【讨论】：