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.
Для других браузеров используйте трюки от ответа Джонатана Сампсона.