html - Bootstrap - 重复图案覆盖背景颜色超大屏幕

Question

我正在尝试为我的超大屏幕在我的丽贝卡紫色背景颜色上获得一个重复的背景图像。我知道我做错了什么，只是不知道它是什么。这是代码:

.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;
}

感谢所有帮助。谢谢。

Answer 1

由于 z-index:-1，您的迷宫位于超大屏幕后面。你需要做的是交换背景，就像在这个 fiddle 中一样 http://jsbin.com/tekefobive/edit?css,output

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