透明元素内部不透明

Posted 2021-02-22

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>