Playing with CSS Opacity

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="#">Ho开发者_StackOverflow社区me</a>
    <a href="#">Contact</a>
    <a href="#">Feedback</a> 
</div>

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/

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).

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.)