Advanced Search

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!

Expand | Embed | Plain Text

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.