css - 如何在 bootstrap 中将较暗的覆盖层覆盖在我的封面图像上？

Question

我已经在我的网站上设置了封面图片:

<div class="intro-header">
    <div class="container">

        <div class="row">
            <div class="col-lg-12">
                <div class="intro-message">
                    <h3>Welcome to</h3>
                    <h3>Example</h3>
                    <hr class="intro-divider">
                    <ul class="list-inline intro-social-buttons">
                        <li>
                            <a href="images/background" class="btn-social btn-outline">f</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- /.container -->
</div>

它是使用以下 CSS 的样式:

.intro-header {
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
    color: #f8f8f8;
    background: url("http://placehold.it/900x650") no-repeat center center;
    background-size: cover;
}

.intro-message {
    position: relative;
    padding-top: 20%;
    padding-bottom: 20%;
}

.intro-message > h1 {
    margin: 0;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    font-size: 5em;
}

.intro-divider {
    width: 400px;
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

.intro-message > h3 {
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}

@media(max-width:767px) {
    .intro-message {
        padding-bottom: 15%;
    }

    .intro-message > h1 {
        font-size: 3em;
    }

    ul.intro-social-buttons > li {
        display: block;
        margin-bottom: 20px;
        padding: 0;
    }

    ul.intro-social-buttons > li:last-child {
        margin-bottom: 0;
    }

    .intro-divider {
        width: 100%;
    }
}

.network-name {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 2px;
}

我想在图像顶部使用叠加层使图像变暗。这可能吗？如果可以，我需要做哪些改变才能获得预期的效果

Answer 1

如果我理解正确的话，你可以使用不透明度。 注意:你说的是先变暗再变暗..这是为了变暗

.intro-header {
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
    color: #f8f8f8;
    background: url("http://placehold.it/900x650") no-repeat center center;
    background-size: cover;
    opacity: .5;
}

下面是较暗的。注意新类 darken

.intro-header {
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: center;
    color: #f8f8f8;
    background: url("http://placehold.it/900x650") no-repeat center center;
    background-size: cover;
}

.intro-message {
    position: relative;
    padding-top: 20%;
    padding-bottom: 20%;
}

.intro-message > h1 {
    margin: 0;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    font-size: 5em;
}

.intro-divider {
    width: 400px;
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

.intro-message > h3 {
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}

@media(max-width:767px) {
    .intro-message {
        padding-bottom: 15%;
    }

    .intro-message > h1 {
        font-size: 3em;
    }

    ul.intro-social-buttons > li {
        display: block;
        margin-bottom: 20px;
        padding: 0;
    }

    ul.intro-social-buttons > li:last-child {
        margin-bottom: 0;
    }

    .intro-divider {
        width: 100%;
    }
}

.network-name {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 2px;
}
.intro-header {
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: center;
    color: #f8f8f8;
    background: url("http://placehold.it/900x650") no-repeat center center;
    background-size: cover;
    opacity: .5;
}
.darken { background: black; opacity: .7;}

<div class="intro-header ">
    <div class="container">

        <div class="row">
            <div class="col-lg-12">
                <div class="intro-message darken">
                    <h3>Welcome to</h3>
                    <h3>Example</h3>
                    <hr class="intro-divider">
                    <ul class="list-inline intro-social-buttons">
                        <li>
                            <a href="images/background" class="btn-social btn-outline">f</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- /.container -->
</div>