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>

 Run code snippetExpand snippet

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

You can either use a semi-transparent PNG image or CSS3:

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

Have a look at this article from css3.info, Opacity, RGBA and compromise.

<p style="background-color:rgba(255,0,0,0.5);">

  <span>Hello world</span>

</p>