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

Question

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

например,

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

Answer 1

Вы не можете. Вам нужно будет наложить (позиционировать и z-index) детей над родителем, то есть они больше не будут детьми. Или используйте прозрачные 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.
Для других браузеров используйте трюки из ответа Джонатана Сэмпсона.