Return to Snippet

Revision: 72189
at May 30, 2017 18:11 by apphp-snippets

Initial Code
<style type="text/css">
.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;
<div class="bar">
   <h2>Text in this bar inherits the transparency.</h2>
<h2 class="ontop">Text in this bar stays opaque.</h2>
<div class="bar"></div>

Initial URL

Initial Description
If using transparency on a block element it makes the text inside transparent as well. Is there a way you can prevent that from happening? Yes, you may do it by putting the text in another div and setting the opacity to 100%, but that didn't do the job. Although, logically, it would!

Initial Title
Non-Transparent Inside Transparent Elements

Initial Tags

Initial Language