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

Posted 2023-03-06

【中文标题】如何使用 HTML 和 CSS 设置唯一透明的背景图像？

【英文标题】：How I can set the only the Background image transparent with HTML and CSS?

【发布时间】：2015-08-27 05:13:49

【问题描述】：

嗨，我想将我的背景图像设置为透明，而其余部分则不透明！我可以这样做吗？我使用 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 有效，但后来我变得全透明 :(

【问题讨论】：

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

【参考方案1】：

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

【参考方案2】：

没有 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;