html - 如何使用 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 拆分:

.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，但您可以通过插入一个伪元素来伪造它，该伪元素的不透明度与它后面的元素的确切大小相同。

可以添加

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