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

嗨，我想把我的背景图像设置为透明的，而里面的其他图像则不是透明的！我能做这个吗？我和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>

.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可以正常工作，但我得到的是全透明：（

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

没有CSS属性background 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;   
}

---

背景图像不能有不透明度。请使用png或其他支持alpha值的图像格式。