Вопрос наследования стилей Div

Question

Я пытаюсь встроить один DIV в другой без наследования стиля непрозрачности оболочки DIV.

Код стиля:

#outer {
background-color: #000;
width: 400px;
height: 400px;
z-index: 0;
opacity: 1;
}

#inner {
background-color: #000;
width: 200px;
height: 200px;
z-index: 1;
opacity: 0.5;
}

Код HTML:

<div id="outer">
    <div id="inner">
    </div>
</div>

Я пробовал несколько разных решений, но ни одно еще не сработало.

Answer 1

Вы можете использовать свойство CSS3s rgba для решения этой проблемы (Работает для цветов).

background-color: rgba(0, 0, 0, .7);

Если вы хотите поддерживать более старый браузер, который не поддерживает CSS3 или *Свойство 1007 * (или когда у вас есть изображения в фоновом режиме), вот ссылки на другие возможные решения:

• Непрозрачные элементы внутри прозрачных элементов
• CSS прозрачность фона без влияния на дочерние элементы, через RGBa и фильтры

Другое кросс-браузерное решение - использовать полупрозрачные PNG за ваши дивы.

Answer 2

Невозможно сделать этого человека.

Два решения, если это просто цвет фона, вы можете:

1. Использовать прозрачное изображение .png

2. используйте rgba.Например, для черного с прозрачностью 60%: background-color: rgba(0, 0, 0, .6);

Answer 3

Это невозможно. Непрозрачность будет применена ко всему внутри. См. Спецификацию для получения дополнительной информации .