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: Hello world p { position: absolute; background-color: green; filter: alpha(opacity=60); opacity: 0.6; } span { color: white; filter: alpha(opacity=100); opacity: 1; }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

Hello,

Your assessment is correct. You need to set a transparent background color rather than setting the transparency on the element overall.

You can use one of two different values for background color:

// Red, Green, Blue, Alpha

// R, G, and B from 0 to 255, Alpha from 0 to 1

background-color:rgba(0,255,0,.5);

Some browsers also support a special type of hex value with two additional characters where the two added ones are for alpha:

// rrggbbaa

// All from 0 to f

background-color:#00ff0099;

rgba() is supported in more browsers (the latter at least recently didn't work in Edge), so I recommend using rgba().