Правильная прозрачность
Однажды мне понадобилось сделать прозрачные боковые поля для одного дизайна.
Я решил использовать прозрачность 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 я, конечно, не претендую, но это работает!
В опере 9.52 глюк – в среднем блоке текст черный, а не белый.
Спасиба большое
хоть я и люблю jQuery, но в данном случае наверное можно было обойтись без него. собственно, это не из вредности пишу. на самом деле интересно – есть ли уже тесты по использованию памяти при выполнение нескольких скриптов на одной странице – например, как-то – accordion – 1 штука, ajax запрос – 1 штука, добавление класса в текст – 2 штуки … и так далее. ибо начинаю замечать что при нагромождении jQuery плагинов страничка уже начинает подтормаживать
Это просто был бонус для тех кто уже использует jQuery.
Интересно…. Возьму на заметку…. Спс.
Подозреваю, что блоки следует поменять местами ( поместить под , а не наоборот, как это приведено в примере), хотя я в этом ничерта не понимаю;)
Автору спасибо! Ценно.
походу у оперы глюк такой. ибо при прозрачности блока он чёрным шрифт делает.
уже встречался с этим. ничего не помогло :(
кстати, в примере на jQuery вроде всё ок
Глюк есть. Но если текст в этом блоке (только в этом) выделить, а потом снять выделение, то текст становится белым :-)
Всё перепробовал – не вставляется HTML :(
Нашёл вариант работающий и в Opera 9.51. Правда в качестве подложки используется png
Извините за такой косяк. Как будет время, сделаю поддержку вставки кода.
Все ваши попытки удалил.
полезный тулз для тестирования в большинстве браузеров
height:1500px;
Т.е. высота блока должна быть заранее известна? А если блок с динамической высотой?
По поводу чёрного текста, тоже встречался с этим глюком, помогло только устанавливание текста в каждом блоке вручную, именно в каждом. Иначе он становился чёрным там, где цвет не задан конкретно, а только задан в body
Для opera 10.00 пример нерабочий. transparency блок не отрисовывается, то есть прозрачной подложки нет =(.
Ну а так спасибо для ФФ можно будет воткнуть как опциональное
Удалил конфиги оперы, заработало ;). Опера дебажная оч штука >_>