如何使用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設置為完全不透明，以正常顯示其內容。