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>

Answer 2

我这样做：

＆＃13;

.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 h2{
    margin-bottom:30px;
    color:#ffffff;
    font-size:40px;
}
.bg {
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:rgba(51, 51, 51, 0.60);
}

＆＃13;

<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="bg"></div>
        <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>

＆＃13;

还有一些其他解决方案，但旧浏览器更容易出错。

背景过度伪z-index

2 个答案: