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

不透明度将应用于整个块，包括子元素。你需要做的是在背景中添加一个额外的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;
}

Answer 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 */

只需调整正确的颜色值即可。

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

2 个答案: