Играя с CSS непрозрачностью

Question

Я пытаюсь создать ButtonBar с помощью простого <div> и изменить его непрозрачность до 50% и дают фоновую

Но элементы, которые приходят внутри этого разделения демонстрируют ту же прозрачность, как там родитель <div>. Я хочу, чтобы они сохранили 100% непрозрачность. (Это невозможно). Как сделать это возможным?

Образец CSS, что я пытаюсь сделать это

<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

Вы должны использовать rgba свойство для этого, так как помутнение затрагивает всех детей.

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

Крис Coyier (CSS-уловок) написал пост об этом: http://css-tricks.com/rgba-browser-support/

Answer 2

если вы хотите только фон непрозрачными, вы можете использовать прозрачный PNG или RGBA-значение в качестве фона. в противном случае это невозможно (как вы упомянули).

Answer 3

Установите непрозрачность в графическом редакторе и сгладьте два слоя вместе.

Вы также можете add another element.

(Вы также должны использовать a list.)