Однажды мне понадобилось сделать прозрачные боковые поля для одного дизайна. Я решил использовать прозрачность CSS.
Но каково было узнать, что все элементы внутри прозрачного блока тоже становятся прозрачны и это никак не изменить :-(, тогда мне пришлось использовать прозрачный png.
Недавно я наткнулся на замечательную технику, позволяющую устранить эту проблему, ею я и хочу с вами любезно поделиться.
Техника заключается в подложке прозрачного блока в основной блок, который вы хотите сделать прозрачным.
Вот так выглядит наш блок:
<div id=«container»>
<h1>Привет, я прозрачный блок</h1>
Текст внутри блока. Текст внутри блока. Текст внутри блока.
</div>
Теперь добавим прозрачную подложку:
<div id=«container»>
<div class=«transparency»>
<!-- Это прозрачный блок-->
</div>
<div class=«content»>
<h1>Привет, я прозрачный блок</h1>
Текст внутри блока. Текст внутри блока. Текст внутри блока.
</div>
</div>
Теперь перейдем к оформлению css:
#container {
padding:20px;
width:300px;
color:#FFFFFF;
position:relative;
float:left;
margin-left:20px;
overflow:hidden;
}
#container .transparency {
opacity:0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
background-color:#000000;
width:340px;
height:1500px;
position:absolute;
top:0px;
left:0px;
z-index:-1;
}
.content {
position:relative;
}
Готово! Теперь все элементы внутри блока не изменят свою прозрачность. Для полного счастья, я решил написать небольшой скрипт на jQuery, который всё автоматизирует.
Вам будет достаточно лишь добавить класс
transp к вашему блоку:<div id=«container» class=«transp»>
<h1>Привет, я прозрачный блок</h1>
Текст внутри блока. Текст внутри блока. Текст внутри блока.
</div>
И конечно, сам jQuery код:
$(document).ready(function() {
$(".transp").wrapInner('<div>').children().addClass(«content»);
$(".transp .content").before('<div>').prev().addClass(«transparency»);
});
На мастера jQuery я, конечно, не претендую, но это работает!
Посмотреть демо
Скачать демо
Подписаться на заметки от Чернева
