如何使用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

没有CSS属性background-opacity，但是您可以通过插入一个伪元素来伪造它，该伪元素具有常规的opacity，且元素的确切大小与之完全相同。

你可以加

.start-section::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;   
}

Answer 2

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