Html 更改jumbotron中的文本而不更改背景样式

我改变了jumbotron的背景不透明度，但也改变了其中文本的不透明度。我想不出一种方法来将文本更改回原始的非不透明状态，但保留背景。我认为这可能是一个继承问题，但不太确定

这是我的密码

html

---

如果我没有包含足够的代码，我会发布更多，谢谢你的帮助

不透明度将应用于包括子元素在内的整个块。你需要做的是在里面添加一个额外的div作为背景

<div class="jumbotron">
    <div class="jumbotron-bg"></div>
    <div class="cover-container">
        <h1 class="cover-heading">Title text.</h1>
        <br>
        <p class="lead">Welcome text.</p>
    </div>
</div>

只是为了确保文本将出现在背景上方

.cover-container {
    position: relative;
    z-index:2;
}

---

解决方案是仅将jumbotron的背景色设置为0.6的不透明度，如：

.jumbotron {
    background-color: rgba(238, 238, 238, 0.6); // exact what you need
}

因此，不会向嵌套元素添加不透明度

如果您必须关注旧版IE，则必须使用以下过滤器：

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */

---

只需调整正确的颜色值。

这就很好地解释了问题：不要忘了向上投票选择正确的答案

.cover-container {
    position: relative;
    z-index:2;
}

.jumbotron {
    background-color: rgba(238, 238, 238, 0.6); // exact what you need
}

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */