Html 引导-使用背景色jumbotron重复图案覆盖

我试图在我的丽贝卡紫色背景上为我的jumbotron拍摄一张重复的背景图像。我知道我做错了什么，只是不知道是什么。代码如下：

.jumbotron {
background-color: rebeccapurple;
color: white;
width: auto;
height: 350px;
margin-bottom: 100px;
position: relative;
display: block;
font-family: FontAwesome;
}

.jumbotron::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(\images\bg_images\maze_white.png) repeat center center;
z-index: -1;
}

---

感谢所有的帮助。谢谢。

由于z-index:-1，您的迷宫位于jumbotron后面。你需要做的是交换背景，就像这把小提琴一样

---

有什么问题吗？你的迷宫不是应该在紫色上面吗？z索引：-1将其放在下面。您可能希望：after具有紫色背景，jumbotron具有迷宫。@Tesseract-问题是没有效果。我尝试按照下面的解决方案交换bg-s，但没有成功。买一个紫色的jumbotron，上面什么也没写。谢谢！我试过了，但现在整个jumbotron都是紫色的，没有文字。@n0de在小提琴中你可以添加文字。没问题，看看这个：@n0de np，如果你觉得这个答案对你有帮助，就投票接受它。谢谢。我试过了，但还是不行。除了背景模式之外，它拥有所有功能。虽然欢迎使用此代码片段，并可能提供一些帮助，但它将介绍如何以及为什么解决此问题。记住，你是在将来回答读者的问题，而不仅仅是现在提问的人！请在回答中添加解释，并说明适用的限制和假设。

.jumbotron {
background-image:url('pattern');
...
}
.jumbotron:after{
background:purple;
z-index:-1;
...
}

// Try This
.jumbotron {
background: url("IMAGE PATH") rebeccapurple repeat center center;
color: white;
width: auto;
height: 350px;
margin-bottom: 100px;
position: relative;
display: block;
font-family: FontAwesome;

}