CSS3 непрозрачный элемент на прозрачном

CSS3 предлагает нам свойство opacity, которое позволяет задать элементу прозрачность. Всё бы хорошо, но все потомки элемента наследуют значение opacity родителя, и переопределить его никак нельзя.

Таким образом, для того, чтобы получить на прозрачном фоне непрозрачный текст, нам необходимо этот текст помещать в блок, который не является потомком блока с прозрачным фоном.

Простенький пример

<div id="elementWrap">
<div class="transparent"></div>
<div class="notTransparent">
<span>Lorem ipsum dolor</span>
</div>
</div>

CSS

.transparent{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
background-color: #777777;
opacity: 0.7;
filter: alpha(opacity=70);
}

.notTransparent{
width: 400px;
height: auto;
top: 50%;
position: absolute;
z-index: 1001;
left: 50%;
background-color: #B5B5B5;
border-radius: 15px;
border: solid 3px #4F4F4F;
padding: 10px;
margin: 0 auto;
margin-top: -50px;
margin-left: -200px;
text-align: center;
}

В этом примере прозрачный блок при помощи z-index перекрывает собой всю страницу и таким образом блокирует доступ к всем элементам. Непрозрачный блок выводится поверх прозрачного (у него значение z-index больше).

Я использовала такую схему, чтобы перекрыть пользователю доступ к странице, пока он не заполнит всю информацию, требуемую на непрозрачном блоке. После заполнения требуемых полей и нажатия на кнопку форма вместе с прозрачным фоном пряталась, и можно было продолжить работу со страницей.