Playing with CSS Opacity

Question

I am trying to create a buttonbar using simple <div> and change its opacity to 50% and give a background

But the elements which come inside this division exhibit the same transparency as there parent <div>. I want them to retain 100% opacity. (Which is not possible). How to make this Possible?

A sample CSS of what I am trying to do is this

<style>    
    #bar { background:#09f;opacity:0.5; }
    #bar a { background:#FF0;opacity:1; }
</style>
<div id="bar">
    <a href="#">Home</a>
    <a href="#">Contact</a>
    <a href="#">Feedback</a> 
</div>

Answer 1

You need to use the rgba property for that, since opacity affects all children.

#bar { background: rgba(0, 120, 255, 0.5); }

Chris Coyier (CSS-tricks) has written a post about this: http://css-tricks.com/rgba-browser-support/

Answer 2

if you want only the background to be opaque, you could use a transparent png or an rgba-value as background. otherwise this isn't possible (as you mentioned).

Answer 3

Set the opacity in your graphics editor and flatten the two layers together.

You can also add another element.

(You should also be using a list.)