Posted By

apphp-snippets on 05/30/17


Tagged

css elements transparent


Versions (?)

Non-Transparent Inside Transparent Elements


 / Published in: CSS
 

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

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!

  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>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: DinaHaines on July 25, 2017

Thank you for your wonderful article. Where else could anyone get that kind of information in such an ideal way of writing? I have a presentation next week, and I am on the look for such information. custom essay writing

You need to login to post a comment.