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

html css opacity
Stijn Sanders picture Stijn Sanders · Apr 30, 2009 · Viewed 1.5M times · Source

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:

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

Georg Schölly picture Georg Schölly · Apr 30, 2009

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

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>

Related questions

CSS Background Opacity

I am using something similar to the following code: <div style="opacity:0.4; background-image:url(...);"> <div style="opacity:1.0;"> Text </div> </div> I expected this to make the background have an opacity of 0.4 and …

Read More
How to make blinking/flashing text with CSS 3

Currently, I have this code: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); -webkit-animation-duration: 1.7s; } It blinks, but it only blinks in "one direction". I mean, it only fades out, and then it appears back …

Read More
How to change text transparency in HTML/CSS?

I'm very new to HTML/CSS and I'm trying to display some text as like 50% transparent. So far I have the HTML to display the text with full opacity <html><font color=\"black\" face=\"arial\" size=\"4\">…

Read More