Add alpha channel to a given color

Question

I have a couple of next to each other that I want to style with CSS. I want to apply a wide variety of colors for the background, but I want the lower one to be the same color with reduced opacity, so I thought of this:

span.foo{     background-color: rgba(0,0,0,1); /*or whatever*/     color:white; }  span.foo:last-child{     background-color: rgba(*,*,*,0.5); /*just an example*/ } 

So I want to change the opacity of the already defined background without affecting the opacity of the text just by using CSS3.

Is this possible?

Answer 1

I believe there is no way to do it.

Css is very limited by itself, and there isn't much you can do with it.

The only way you could add opacity is:

opacity: 0.5 

But the above would also affect the text itself, not only background.

However, you could wrap it in way that would separate the background blocks from the text, so that would keep the color of the text untouched.

EDIT: See the fiddle: http://jsfiddle.net/YfSn7/30/

But that may look somewhat ridiculous, so I wouldn't much advice using it.

Guess you would have to accept that this is impossible, if you do actually want to make things simpler instead of over-complicating them.

Answer 2

If you have Sass:

background-color: rgba(white, 0.5);