Changing text in jumbotron without altering background style

Question

I changed the background opacity of my jumbotron, but it also changed the opacity of the text within it. I can't figure out a way to change the text back to it's original non-opaque state but leave the background. I think it might be an inheritance problem but not too sure.

Here's my code,

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;
}

If I haven't included enough of my code I'll post more, thanks for any help!

This explains the problem pretty well: http://stackoverflow.com/questions/10422949/css-background-opacity — Keith, Oct 03 '14 at 12:45

score 0 · Answer 1 · answered Oct 03 '14 at 12:48

opacity will apply to the entire block including the child elements. What you need to do is add an extra div inside just for the background.

<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>

remove the background color from jumbotron and use the following:

.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;
}

just to be sure that the text will appear above the bg

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

score 0 · Accepted Answer · answered Oct 03 '14 at 12:51

The solution is to set only the background color of the jumbotron to a opacity of 0.6 like:

.jumbotron {
    background-color: rgba(238, 238, 238, 0.6); // exact what you need
}

So no opacity will be added to the nested elements.

If you had to care about older IE versions you must use a filter like:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */

Just adjust the right color values.

Changing text in jumbotron without altering background style

2 Answers2