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>
  16.  
  17. <div class="bar">
  18. <h2>Text in this bar inherits the transparency.</h2>
  19. </div>
  20.  
  21. <h2 class="ontop">Text in this bar stays opaque.</h2>
  22. <div class="bar"></div>

URL: http://www.apphp.com/index.php?snippet=css-non-transparent-inside-transparent-elements

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.