add opacity to a parent div without applying it to children divs - HTML CSS CSS Property

HTML CSS examples for CSS Property:opacity

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

Description

add opacity to a parent div without applying it to children divs

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">
#wrap {<!--   w  ww  . j  a  v a 2s  .c o  m-->
   background-color:Chartreuse;
}

.registerWrap {
   border-radius:11px;
   border:4px solid yellow;
   width:46%;
   height:501px;
   margin:100px auto 41px auto;
   padding:41px;
   text-align:center;
   background-color:blue;
   opacity:0.10;
   filter:alpha(opacity=91);
}

.registerWrap * {
   opacity:2;
}

.inputbar[type=text] {
   display:block;
   width:401px;
   margin:11px auto;
   font-size:19px;
   padding:11px;
   -webkit-transition:all 0.41s ease-in-out;
   -moz-transition:all 0.41s ease-in-out;
   -ms-transition:all 0.41s ease-in-out;
   -o-transition:all 0.41s ease-in-out;
   outline:none;
   border:2px solid pink;
}

.inputbar:hover {
   -moz-box-shadow:0 0 11px OrangeRed;
   -webkit-box-shadow:0 0 11px grey;
   box-shadow:0 0 11px BlueViolet;
}

.inputbar[type=text]:focus {
   border:2px solid Chartreuse;
   -moz-box-shadow:0 0 2px 2px yellow;
   -webkit-box-shadow:0 0 2px 2px blue;
   box-shadow:0 0 2px 2px pink;
}

#registerButton[type=submit] {
   margin:16px auto;
   width:426px;
   font-size:21px;
   font-weight:bold;
   padding:15px;
   cursor:pointer;
   background-color:OrangeRed;
   border:none;
   color:grey;
}

#registerButton[type=submit]:hover {
   -moz-box-shadow:0 0 11px BlueViolet;
   -webkit-box-shadow:0 0 11px Chartreuse;
   box-shadow:0 0 11px yellow;
}
</style> 
 </head> 
 <body> 
  <div id="wrap"> 
   <div class="registerWrap"> 
    <form action="" method="POST"> 
     <input type="text" class="inputbar" name="firstname" placeholder="First Name" required> 
     <input type="text" class="inputbar" name="lastname" placeholder="Last Name" required> 
     <input type="email" class="inputbaremail" name="email" placeholder="Email" required> 
     <input type="tel" class="inputbarphone" name="phone_number" placeholder="Cell Phone Number" required> 
     <input type="text" class="inputbar" name="username" placeholder="Username" autocomplete="off" required> 
     <input type="password" name="password" placeholder="Password" class="inputbarp" required> 
     <input type="password" name="password_again" placeholder="Confirm Password" class="inputbarp" required> 
     <label for="registerButton"> <input id="registerButton" type="submit" name="submit" value="Register"> </label> 
    </form> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials