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!
[View All Snippets]
[View All Snippets]
Show Plain Text »
Result:
- <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;
- }
- </style>
- <div class="bar">
- <h2>Text in this bar inherits the transparency.</h2>
- </div>
- <h2 class="ontop">Text in this bar stays opaque.</h2>
- <div class="bar"></div>
Result: