CSS Opacity impacting text when not in div

Question

Hi so am testing CSS background and div opacity but for some reason it also impacts the text when the text is not in the div...

The h2 text should be white since i added it in the css color: white but its not

What am i doing wrong please explain if you answer with a fix

Thank you.

 .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

Your overlay it's above the content . Change the content to relative positioning and change the z-index to some upper:

 .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

叠加层的位置是绝对的，并且z-index值为9，高于容器类放置位置：相对于容器和z-index：10。