在不改变背景样式的情况下更改 jumbotron 中的文本

Question

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

这是我的代码，

html

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

css

.jumbotron {
    opacity: 0.6;
}

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

Answer 1

解决方法是只将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 */

只需调整正确的颜色值。

Answer 2

不透明度将应用于包括子元素在内的整个块。你需要做的就是在里面添加一个额外的 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>

从 jumbotron 中删除背景颜色并使用以下内容：

.jumbotron {
    position: relative;
}

.jumbotron-bg {
    opacity: 0.6;
    background: #000; /* or whatever color you use*/
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

只是为了确保文本会出现在 bg 上方

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