Непрозрачность свойства CSS3
Вопрос
Как я могу влиять только на непрозрачность родительского элемента, а не на его дочерние элементы
например,
я хочу, чтобы непрозрачность signup_backdrop была установлена на 0,5, но это дочерний элемент signup_box, я вообще не хочу иметь никакой непрозрачности, но он будет применять непрозрачность, установленную в signup_backdrop, как унаследованную.
Решение
Ты не можешь.Вам нужно будет наложить дочерние элементы (позиционирование и z-индекс) поверх родительских, что означает, что они больше не будут дочерними элементами.Это, или используйте прозрачный формат PNG для родительского фона и установите непрозрачность для любых братьев и сестер полностью непрозрачного дочернего элемента.
* непроверенный, но должен быть хорошим.
.signup_backdrop {
position:fixed;
top:0; left:0;
background:#333333;
width:100%; height:100%;
z-index:10;
}
.signup_box {
position:fixed;
top:25%; left:25%;
background:#ffffff;
width:50%; height:50%;
z-index:20;
}
<div class="signup_box">
<p>Hello World</p>
</div>
<div class="signup_backdrop"></div>
Другие советы
В CSS 3 у вас есть rbga() чтобы добавить цвет и непрозрачность к определенному элементу.
Пока это реализовано только в Safari 3 и Firefox 3.
Для других браузеров используйте приемы из ответа Джонатана Сэмпсона.