[Solved] How to use an rgba background color on another background with a different color

[olivaw]

It’s probably easiest to give an example:

http://jsfiddle.net/qpAJD/

You’ll notice that the ‘container’ box has a brown-ey colour due to the alpha channel I’ve added. If you remove the alpha channel then the box is green.

What I want is for the ‘container’ div to be green but still have transparency so the ‘wrapper’ div’s background can be partially seen.

Is it possible to do this with rgba or some other CSS3?

[jamygolden]

Why don’t you set the transparency to 0.9 or something?

.container { background: rgba(128, 178, 56, 0.9); }

[olivaw]

@jamy_za I can’t because the wrapper also has a background image which contains a pattern. The pattern is quite faint so the container needs to have a transparency of at least 0.5 for the pattern to be noticeable.

In addition, even at 0.9 transparency the background color of the wrapper is not green enough. I need the color to be exactly the same as if the transparency wasn’t there.

[Mottie]

Try

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

It seems to match

[jamygolden]

Ha! Nice one @Mottie

[olivaw]

@Mottie That’s great thanks a lot. Would it be possible to make a bright yellow in the same way with alpha transparency? E.g:

rgb(236, 239, 60)

I’ve tried playing around with the rgb values but all I can get is a very dark yellow.

EDIT: sorry for double posts!

[Mottie]

Sadly with 50% transparency, there isn’t any way to match that bright yellow. You might just have to tone down the brightness or choose a different color. Honestly, it was just luck that the greens matched LOL.

Also, you might want to look at using HSLA instead of RGBA, it makes life a lot easier to find multiple shades of the same color – here is an article by Chris and a color picker.

[olivaw]

@Mottie I’ll check that out. Thanks for your help.

[Author]

Posts