I want to make opaque text on a a transparent background

Question

Is it possible in CSS to make the background of a text transparent but the text remains the same (non transparent)?

I tried this:

p {
  position: absolute;
  background-color: blue;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: black;
  filter: alpha(opacity=100);
  opacity: 1;
}

<p>
  <span>Earth is a planet</span>
</p>

Answer 1

yes, it is possible and you don't need that extra <span>to get it.

With the rgba notation you can set an alpha value for the background color

HTML

<p>Earth is a planet</p>

CSS

p {
  position: absolute;
  background-color: rgba(0,0,255,0.6); /* r=0 g=0 b=255 alpha=60% */
  color: black;
}