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

Question

Я пытаюсь создать панель кнопок, используя простой <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); }

Крис Койер (CSS-трюки) написал пост об этом:http://css -tricks.com / RGBA-браузер поддержка /

Answer 2

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

Answer 3

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

Вы также можете добавить еще один элемент .

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