Непрозрачность свойства CSS3

Question

Как я могу влиять только на непрозрачность родительского элемента, а не на его дочерние элементы

например,

я хочу, чтобы непрозрачность signup_backdrop была установлена на 0,5, но это дочерний элемент signup_box, я вообще не хочу иметь никакой непрозрачности, но он будет применять непрозрачность, установленную в signup_backdrop, как унаследованную.

Answer 1

Ты не можешь.Вам нужно будет наложить дочерние элементы (позиционирование и 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>

Answer 2

В CSS 3 у вас есть rbga() чтобы добавить цвет и непрозрачность к определенному элементу.
Пока это реализовано только в Safari 3 и Firefox 3.
Для других браузеров используйте приемы из ответа Джонатана Сэмпсона.