css - how can I do an image overlay without fading text? -
i'm trying have image overlay , text on it. overlay have works fine, text fading don't want. i'd text stay same. here of code html:
<div class="hero"> <div class="overlay"> <div class="header"> <h1 class="overlay-text"</h1> <p class="text-center overlay-text">some content here</p> </div> </div> </div>
css:
.hero { background-image: url('http://localhost:3000/3b1425242c422b429f78f272b0a4c0f7.jpg'); background-size: cover; position: relative; display: block; min-height: 101vh; color: white; } .hero:after { content: ' '; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,.2); } .overlay-text { z-index: 200; } .overlay-text:after { z-index: 200; }
.overlay text tried, doesn't anything.
here little example: https://jsfiddle.net/zydkz1ed/1/ need make .overlay-text
absolute or relative in order z-index
works:
.overlay-text { position: absolute; z-index: 200; }
also h1 tag wasn't quite right, should be: <h1 class="overlay-text"></h1>
. there missing >
sign.
Comments
Post a Comment