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

Posted 2023-03-06

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

【英文标题】：Changing text in jumbotron without altering background style

【发布时间】：2014-11-28 12:33:06

【问题描述】：

我更改了 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;

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

【问题讨论】：

这很好地解释了这个问题：***.com/questions/10422949/css-background-opacity

别忘了给正确答案点赞

【参考方案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 */

只需调整正确的颜色值。

【参考方案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;