Непрозрачный div внутри прозрачного div

Question

Я создаю веб-страницу с прозрачным div.

Я хочу добавить непрозрачный div внутри этого прозрачного div, и я обнаружил, что он также прозрачен.

Я пытаюсь установить div внутри в opacity: 1, но это не работает.

Что мне делать?

Answer 1

Я нашел это где-то во время исследования CSS3 и извиняюсь, что не могу перезвонить, где, чтобы отдать должное соответствующему автору.

Но если вы ищете полупрозрачный фон сплошного цвета на div. Вместо установки цвета и управления прозрачностью с помощью свойств непрозрачности / альфа, установите свойство background-color напрямую, используя формат rgba (rrr, ggg, bbb, aaa). Это предотвратит наследование любых дочерних элементов любой прозрачностью.

отл.

#mydiv { background-color: rgba(128,64,0,0.75); }

Answer 2

Есть два способа обойти это:

• Поддельная прозрачность на содержащем div с использованием прозрачного PNG в качестве фонового изображения.
• Разделите элементы div так, чтобы они располагались рядом, а затем используйте относительное или абсолютное позиционирование для их укладки.

Answer 3

К сожалению, это не работает в CSS. В прошлом я использовал позиционирование, чтобы поместить непрозрачный div, содержащий содержимое, в прозрачный div. Я не мог выкопать старый код из моих проектов, но я нашел этот пост в блоге:

Непрозрачные элементы внутри прозрачных элементов

Answer 4

используйте background, padding, background-origin для управления padding и z-index для контроля положения элемента. Например:

#mydiv{ background: white; padding:100px; background-origin:border-box; z-index:1}