如何使用HTML和CSS设置唯一的透明背景图像？

Question

嗨,我想设置我的背景图像透明,其余内部不!我可以这样做吗？我使用Bootstrap ......

这是我的HTML的分裂

<!-- Startseite Section -->
    <section id="startseite" class="start-section">
        <div class="container">
            <h1><span style="opacity: 1.0;">Interne Links</span></h1>

            <div class="row">
                <div class="col-lg-12">
                    <section id="Startseite" class="pfblock">

                            <div class="row">

                             ....//Here are Elements how text and divs 

                            </div>

                    </section>
                </div>
            </div>
        </div>
    </section>

这是CSS Split:

.start-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    /*background: #fff;*/
    background-image:url('../img/bg.jpg');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    opacity: 0.7;
}

有关信息:不透明度0.7工作,但后来我透明:(

Answer 1

您可以在 .start-section div 后面添加一个元素，该元素具有相同的尺寸，并且仅包含您的背景图像。然后，您可以将该元素设置为 0.7 不透明度，并使 .start-section div 处于完全不透明度以正常显示其内容。