Non-Transparent Inside Transparent Elements

/ Published in: CSS
Save to your folder(s)

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!

Copy this code and paste it in your HTML
  1. <style type="text/css">
  2. .bar {
  3. height: 4em;
  4. padding-top: 2em;
  5. opacity: 0.5;
  6. background: black;
  7. border-top: 3px solid #ccc;
  8. border-bottom: 3px solid #ccc;
  9. margin-top: 5.0em;
  10. }
  11. h2.ontop {
  12. position: relative;
  13. top: 4.7em;
  14. }
  15. </style>
  17. <div class="bar">
  18. <h2>Text in this bar inherits the transparency.</h2>
  19. </div>
  21. <h2 class="ontop">Text in this bar stays opaque.</h2>
  22. <div class="bar"></div>


Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.