html - Want to create a transparent color overlay over background image but want everything infront of overlay -


basically, want background, transparent overlay, , of content brought front. far have

#overlay{     position:absolute;     left:0;     right:0;     top:0;     bottom:0;     background-color:grey;     opacity:0.5;     } 

and have <div id="overlay"> surrounding in html document. in advance.

i use thepios answer use :before rid of unnecessary overlay div:

body {    width: 100%;    height: 100%;  }  .content {    position: relative;    width: 500px;    height: 500px;    background-image: url('http://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg');    background-size: cover;    padding: 50px;  }  .content:before{    content: ' ';    position: absolute;    top: 0px;    left: 0px;    width: 100%;    height: 100%;    background-color: rgba(0, 0, 0, 0.5);  }  .inner-content {    width: 250px;    height: 250px;    padding: 20px;    background-color: #ffffff;    color: #000000;    position: absolute;  }
<div class="content">    <div class="inner-content">your inner content</div>  </div>


Comments

Popular posts from this blog

javascript - Laravel datatable invalid JSON response -

java - Exception in thread "main" org.springframework.context.ApplicationContextException: Unable to start embedded container; -

sql server 2008 - My Sql Code Get An Error Of Msg 245, Level 16, State 1, Line 1 Conversion failed when converting the varchar value '8:45 AM' to data type int -