Transparant paragraph tag but not the anchor inside it

Question

How can I get an anchor inside a transparent paragraph tag to have 100% opacity.

p {
    opacity: 0.8;
}
a {
    opacity: 1;
}


<p>This is a paragraph with transparent text an <a href="">anchor</a> that should NOT be transparent.</p>

Answer 1

Depending on what you are trying to make transparent (foreground? background? image?), you can use alpha channel (rgba color, where the fourth element is the opacity), which will not impact child elements. In general, opacity as you're using it will always impact all child elements.

p {
    color: rgba(0,0,0,0.8);
  }