在不改變背景風格的情況下更改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中的文本

回答

相關問題