Я создаю веб-страницу с прозрачным div.
Я хочу добавить непрозрачный div внутри этого прозрачного div, и я обнаружил, что он также прозрачен.
Я пытаюсь установить div внутри на непрозрачность: 1, но он не работает.
Что мне делать?
Непрозрачный div внутри прозрачного div
Ответ 1
Есть два способа, которыми я знаю, чтобы обойти это:
- Поддельная прозрачность в содержащем div с использованием прозрачного PNG в качестве фонового изображения.
- Разделите divs так, чтобы они были бок о бок, а затем используйте относительное или абсолютное позиционирование для их стека.
Ответ 2
Я нашел это где-то, исследуя CSS3, и извиняюсь, что я не могу перезвонить туда, чтобы кредитовать соответствующего автора.
Но если вы ищете полупрозрачный фон сплошной цвет на div. Вместо того, чтобы устанавливать цвет и управлять прозрачностью с помощью свойств opacity/alpha, задайте свойство background-color напрямую с помощью формата rgba (rrr, ggg, bbb, aaa). Это предотвратит наследование любых дочерних элементов от прозрачности.
ех.
#mydiv { background-color: rgba(128,64,0,0.75); }
Ответ 3
К сожалению, это не работает в CSS. Раньше я использовал позиционирование, чтобы подтолкнуть непрозрачный div, содержащий контент, в прозрачный div. Я не мог выкопать старый код из своих проектов, но я нашел этот пост в блоге:
Ответ 4
используйте фон, дополнение, фон-начало, чтобы управлять дополнением и z-индексом, чтобы управлять положением элемента. Например:
#mydiv{ background: white; padding:100px; background-origin:border-box; z-index:1}