CSS opacity playback

Question

I am trying to create a keypad with a simple one <div>and change its opacity to 50% and give a background

But the elements that fall into this separation have the same transparency as the parent <div>. I want them to maintain 100% opacity. (It's impossible). How to make this possible?

The CSS example I'm trying to do is

<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

To do this, you need to use the property rgba, since opacity affects all children.

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

Chris Coyer (CSS tricks) wrote a post about this: http://css-tricks.com/rgba-browser-support/

Answer 2

, , png rgba . ( ).

Answer 3

.

You can also add another item .

(You should also use a list .)