Fixing opacity of content inside div - HTML CSS CSS Property

HTML CSS examples for CSS Property:opacity

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. opacity

Description

Fixing opacity of content inside div

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
body {<!-- ww w.  j a  v a 2s.  com-->
   background:Chartreuse;
}

#outer {
   width:201px;
   height:201px;
   position:relative;
   padding:3em;
}

#outer::before {
   content:'';
   position:absolute;
   left:0;
   top:0;
   width:100%;
   height:100%;
   background:red;
   opacity:.6;
   z-index:-2;
}

#inner {
   width:100%;
   height:100%;
   background:blue;
}

p {
   color:yellow;
}
</style> 
 </head> 
 <body> 
  <div id="outer"> 
   <div id="inner"></div> 
  </div> 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus</p>  
 </body>
</html>

Related Tutorials