How do I give text or an image a transparent background using CSS?

Question

Is it possible, using CSS only, to make the background of an element semi-transparent but have the content (text & images) of the element opaque?

I'd like to accomplish this without having the text and the background as two separate elements.

When trying:

p {    position: absolute;    background-color: green;    filter: alpha(opacity=60);    opacity: 0.6;  }    span {    color: white;    filter: alpha(opacity=100);    opacity: 1;  }

<p>    <span>Hello world</span>  </p>

It looks like child elements are subjected to the opacity of their parents, so opacity:1 is relative to the opacity:0.6 of the parent.

Answer 1

Either use a semi-transparent PNG or SVG image or use CSS:

background-color: rgba(255, 0, 0, 0.5); 

Here's an article from css3.info, Opacity, RGBA and compromise (2007-06-03).

---

<p style="background-color: rgba(255, 0, 0, 0.5);">   <span>Hello, World!</span> </p>