Non-Transparent Inside Transparent Elements

Non-Transparent Inside Transparent Elements

<style type="text/css">
/* source: http://www.apphp.com/index.php?snippet=css-non-transparent-inside-transparent-elements */
.bar {
   height: 4em;
   padding-top: 2em;
   opacity: 0.5;
   background: black;
   border-top: 3px solid #ccc;
   border-bottom: 3px solid #ccc;
   margin-top: 5.0em;
}
h2.ontop {
   position: relative;
   top: 4.7em;
}
</style>
 
<div class="bar">
   <h2>Text in this bar inherits the transparency.</h2>
</div>
        
<h2 class="ontop">Text in this bar stays opaque.</h2>
<div class="bar"></div>