04 января 2008 ~ 17 Комментариев

Правильная прозрачность

dfsdfs

Однажды мне понадобилось сделать прозрачные боковые поля для одного дизайна.

Я решил использовать прозрачность css.

Но каково было узнать, что все элементы внутри прозрачного блока тоже становятся прозрачны и это никак не изменить :-(, тогда мне пришлось использовать прозрачный png.

Sexy Beast divx Недавно я наткнулся на замечательную технику позволяющую устранить эту проблему, ею я и хочу с вами любезно поделиться.

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

 

Вот так выглядит наш блок:

<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 я, конечно, не претендую, но это работает!

 

Посмотреть демо

Скачать демо

17 Комментариев для “Правильная прозрачность”

  1. enternet 4 августа 2008 at 18:21 Permalink

    В опере 9.52 глюк – в среднем блоке текст черный, а не белый.

  2. Demi 5 августа 2008 at 6:12 Permalink

    Спасиба большое

  3. kikaha 5 августа 2008 at 15:57 Permalink

    хоть я и люблю jQuery, но в данном случае наверное можно было обойтись без него. собственно, это не из вредности пишу. на самом деле интересно – есть ли уже тесты по использованию памяти при выполнение нескольких скриптов на одной странице – например, как-то – accordion – 1 штука, ajax запрос – 1 штука, добавление класса в текст – 2 штуки … и так далее. ибо начинаю замечать что при нагромождении jQuery плагинов страничка уже начинает подтормаживать

  4. Я собственной персоной 5 августа 2008 at 16:29 Permalink

    хоть я и люблю jQuery, но в данном случае наверное можно было обойтись без него. собственно, это не из вредности пишу. на самом деле интересно – есть ли уже тесты по использованию памяти при выполнение нескольких скриптов на одной странице – например, как-то – accordion – 1 штука, ajax запрос – 1 штука, добавление класса в текст – 2 штуки … и так далее. ибо начинаю замечать что при нагромождении jQuery плагинов страничка уже начинает подтормаживать

    Это просто был бонус для тех кто уже использует jQuery.

  5. Rodriguez 5 августа 2008 at 18:01 Permalink

    Интересно…. Возьму на заметку…. Спс.

  6. -=Vovan=- 8 августа 2008 at 4:05 Permalink

    В опере 9.52 глюк – в среднем блоке текст черный, а не белый.

    Подозреваю, что блоки следует поменять местами ( поместить под , а не наоборот, как это приведено в примере), хотя я в этом ничерта не понимаю;)

    Автору спасибо! Ценно.

  7. Serge 18 августа 2008 at 3:02 Permalink

    В опере 9.52 глюк – в среднем блоке текст черный, а не белый.

    походу у оперы глюк такой. ибо при прозрачности блока он чёрным шрифт делает.
    уже встречался с этим. ничего не помогло :(

  8. Serge 18 августа 2008 at 3:05 Permalink

    кстати, в примере на jQuery вроде всё ок

  9. Paul 18 августа 2008 at 3:47 Permalink

    В опере 9.52 глюк – в среднем блоке текст черный, а не белый.

    Глюк есть. Но если текст в этом блоке (только в этом) выделить, а потом снять выделение, то текст становится белым :-)

  10. Goracio 22 августа 2008 at 17:27 Permalink

    Всё перепробовал – не вставляется HTML :(

  11. Goracio 22 августа 2008 at 17:50 Permalink

    Нашёл вариант работающий и в Opera 9.51. Правда в качестве подложки используется png http://www.beart.ru/2008/07/png-prozrachnost/

  12. Я собственной персоной 22 августа 2008 at 18:19 Permalink

    Всё перепробовал – не вставляется HTML :(

    Извините за такой косяк. Как будет время, сделаю поддержку вставки кода.
    Все ваши попытки удалил.

  13. Yuriy 29 сентября 2008 at 15:36 Permalink

    полезный тулз для тестирования в большинстве браузеров
    http://browsershots.org/

  14. alexpts 17 мая 2009 at 1:16 Permalink

    height:1500px;
    Т.е. высота блока должна быть заранее известна? А если блок с динамической высотой?

  15. Андриан 6 июня 2009 at 8:25 Permalink

    По поводу чёрного текста, тоже встречался с этим глюком, помогло только устанавливание текста в каждом блоке вручную, именно в каждом. Иначе он становился чёрным там, где цвет не задан конкретно, а только задан в body

  16. Tarvitz 24 сентября 2009 at 6:24 Permalink

    Для opera 10.00 пример нерабочий. transparency блок не отрисовывается, то есть прозрачной подложки нет =(.

    Ну а так спасибо для ФФ можно будет воткнуть как опциональное

  17. Tarvitz 24 сентября 2009 at 7:43 Permalink

    Удалил конфиги оперы, заработало ;). Опера дебажная оч штука >_>


Оставить комментарий