HTML CSS examples for CSS Widget:Image Text
Do an image overlay without fading text
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .hero {<!-- ww w. j a va2 s .co m--> background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png'); background-size:cover; position:relative; display:block; min-height:102vh; color:Chartreuse; } .hero:after { content:''; position:absolute; left:0; right:0; top:0; bottom:0; background-color:yellow; } .overlay-text { position:absolute; z-index:201; } .overlay-text:after { z-index:201; } </style> </head> <body> <div class="hero"> <div class="overlay"> <div class="header"> <p class="text-center overlay-text">Lorem ipsum dolor</p> </div> </div> </div> </body> </html>