在不改变背景风格的情况下更改jumbotron中的文本

我更改了我的jumbotron的背景不透明度，但它也改变了其中的文本的不透明度。我找不到一种方法将文本改回原来的非透明状态，但离开背景。我认为这可能是遗传问题，但不太确定。在不改变背景风格的情况下更改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; 
}

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

来源

2014-10-03 nextstep

这解释了这个问题很好：http://stackoverflow.com/questions/10422949/css-background-opacity – Keith 2014-10-03 12:45:50

不要忘记upvote正确的答案 – 2014-10-07 07:55:45

解决的办法是只设置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 */

只要调整合适的颜色值。

来源

2014-10-03 12:51:34

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

来源

2014-10-03 12:48:21 Christophe

在不改变背景风格的情况下更改jumbotron中的文本

回答

相关问题