CSS Undurchsichtigkeit Text auswirken, wenn sie nicht in div

Question

Hallo so bin CSS Hintergrund und div Opazitätsprüfung aber aus irgendeinem Grund, es wirkt sich auch auf den Text, wenn der Text nicht in der div ist ...

Der h2 text weiß sein sollte da ich es in der CSS-Farbe hinzugefügt: weiß aber es ist nicht

Was mache ich falsch bitte erklären, wenn Sie mit einem fix beantworten

Danke.

.bimg{ 
 
    background-size: cover; 
 
    background: transparent no-repeat fixed; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
.overlay{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: #2a2d36; 
 
    opacity: .54; 
 
    z-index: 9; 
 
} 
 

 
#container{ 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
} 
 

 
#intro{ 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
} 
 

 
#intro h2{ 
 
    font-size: 70px; 
 
    line-height: 87px; 
 
    font-weight: 100; 
 
    color: white; 
 
}

<section class="bimg" style="height: 831px; background-image: url(http://widewallpaper.info/wp-content/uploads/2016/03/Anime-Wallpaper-1920x1080-064.jpg);"> 
 
    <div class="overlay"></div> 
 
    <div id="container"> 
 
    <div id="intro"> 
 
     <h2>Testing this.</h2> 
 
    </div> 
 
    </div> 
 
</section>

Answer 1

Ihre overlay es über dem content ist. Ändern Sie den Inhalt auf die relative Positionierung und ändern Sie den Z-Index bis zu einem gewissen Ober:

.bimg{ 
 
    background-size: cover; 
 
    background: transparent no-repeat fixed; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
.overlay{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: #2a2d36; 
 
    opacity: .54; 
 
    z-index: 1; 
 
} 
 

 
#container{ 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 

 
#intro{ 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
} 
 

 
#intro h2{ 
 
    font-size: 70px; 
 
    line-height: 87px; 
 
    font-weight: 100; 
 
    color: white; 
 
}

<section class="bimg" style="height: 831px; background-image: url(http://widewallpaper.info/wp-content/uploads/2016/03/Anime-Wallpaper-1920x1080-064.jpg);"> 
 
    <div class="overlay"></div> 
 
    <div id="container"> 
 
    <div id="intro"> 
 
     <h2>Testing this.</h2> 
 
    </div> 
 
    </div> 
 
</section>

Answer 2

Ihre Overlay als absolute positioniert ist und z-Index-Wert 9, die über dem Containerklasse Put Position: relativ zum Container und Z-Index: 10.