How to remove opacity in tag when apply opacity in background?

Question

Opacity automatically apply on legend text? How to remove opacity from it?

fieldset {
  background-color: black;
  opacity: .2; 
               /* this automatically apply opacity in legend text.. why? */
}

legend {
  color: green;
  font-size: 20px;
}

<form>
  <fieldset>
    <legend>My Form</legend>
  </fieldset>
</form>

Answer 1

Opacity will automatically affect all it's children as well. I suggest that you use a transparent background color instead.

fieldset{
  background-color: rgba(0,0,0,0.2);
}
legend{
  color:red;
}

   <form action="">
      <fieldset>
          <legend>My Form</legend>
      </fieldset>
   </form>

Answer 2

You can use rgba for the fieldset instead of background color and opacity.

Try:

background-color: rgba(0,0,0,0.2);