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!


                                          <
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>

Favorite0