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

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).

Beware that the text still needs sufficient contrast with the background, once the underlying background shines through.


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

Leave a Comment