html - 背景过度伪 z-index

Question

你好 我已经尝试使用伪元素创建背景色叠加层，但问题是像 h2 这样的内部内容(在本例中)将位于背景叠加层之下，我知道我可以给出 h2 相对位置和 z-index 但我被问到是否有办法让我写更少的代码:

.breadCrumbs{
    width:100%;
    padding:20px 0;
    position:relative;
    background-image:url('http://store6.up-00.com/2017-04/149189733741781.jpg');
    background-size:cover;
    background-attachment:fixed;
}
.breadCrumbs:after{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:rgba(51, 51, 51, 0.60);
}
.breadCrumbs h2{
    margin-bottom:30px;
    color:#ffffff;
    font-size:40px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="breadCrumbs text-center">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <h2>Contact</h2>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="pages.html">Pages</a></li>
                        <li>Contact</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

Answer 1

使用 before 而不是 after。

.breadCrumbs{
    width:100%;
    padding:20px 0;
    position:relative;
    background-image:url('http://store6.up-00.com/2017-04/149189733741781.jpg');
    background-size:cover;
    background-attachment:fixed;
}
.breadCrumbs:before{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:rgba(51, 51, 51, 0.60);
    
}
.breadCrumbs h2{
    margin-bottom:30px;
    color:#ffffff;
    font-size:40px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="breadCrumbs text-center">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <h2>Contact</h2>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="pages.html">Pages</a></li>
                        <li>Contact</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>