Проблемка с Opacity (filter: alpha())

Тема в разделе "Веб-дизайн", создана пользователем sunyang, 12 авг 2010.

Модераторы: zek24
  1. sunyang

    sunyang

    Регистр.:
    25 апр 2009
    Сообщения:
    440
    Симпатии:
    30
    Решил сделать полупрозрачный фон менюшки. Но только менюшки, а получается всей таблицы с содержимым.
    Вот менюшка:
    HTML:
    
    <tr>
        <TD height="30" background="{THEME}/images/bgmenu.gif" class="head_bg">
        <table width="800" border="0" cellspacing="0" cellpadding="0" align="center" class="head_menu">
      <tr>
        <td align="center"><a href="#">Главная</a></td>
        <td align="center"><a href="#">Меню 2</a></td>
      </tr>
    </table>
        </TD>
    <tr>
      </tr>
    Стиль:
    HTML:
    
    .head_bg {
    opacity:0.5;
    filter: alpha(opacity=50);
    }
    .head_menu {
    font-size:14px;
    color:#ffa200;
    font-weight:bolder;
    }
    .head_menu a {
    color:#ffa200;
    text-decoration:none
    }
    .head_menu a:hover {
    text-decoration: underline;
    }
    
    Так вот ссылки тоже отображаются полупрозрачными.
    Как применить opacity только для background ячейки, не затрагивая внутренние элементы этой ячейки?:confused:
     
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.140
    Симпатии:
    671
    читай про RGBA, чтобы только фону задавалась прозрачность
    http://dimox.net/cross-browser-rgba-support/
    там как для нормальных браузеров прописать и костыль для ишака
     
  3. bork75

    bork75 The Team

    Регистр.:
    21 июн 2008
    Сообщения:
    1.451
    Симпатии:
    677
    Получается, что сначала идёт ячейка, которой задан фон, а сверху (внутри) ещё таблица. Т.к. прозрачность задана для ячейки, то этот параметр и применяется для таблицы, которая внутри.

    Фу, надеюсь понятно объяснил.

    Правильнее так.

    PHP:

    <tr>
        <
    TD height="30" >
        <
    table width="800" border="0" cellspacing="0" cellpadding="0" align="center" class="head_menu" height="153">
      <
    tr>
        <
    td background="{THEME}/images/bgmenu.gif" class="head_bg" align="center"><a href="#">Главная</a></td>
        <
    td background="{THEME}/images/bgmenu.gif" class="head_bg" align="center"><a href="#">Меню 2</a></td>
      </
    tr>
        <
    tr>
        <
    td align="center">текст</td>
        <
    td align="center">текст</td>
      </
    tr>
    </
    table>
        </
    TD>
    <
    tr>
      </
    tr>
    Я применяю фон уже не для всей ячейки, а только для ячеек в таблице и для них же прозрачность. Проверил. работает.
     
  4. sunyang

    sunyang

    Регистр.:
    25 апр 2009
    Сообщения:
    440
    Симпатии:
    30

    Тут какая-то несуразица получается...

    Добавлено через 5 минут
    Классная вещица, жаль на даже не очень старых броузерах не работает((
    Будем ждать, когда придумают нормальную прозрачность)
     
  5. bork75

    bork75 The Team

    Регистр.:
    21 июн 2008
    Сообщения:
    1.451
    Симпатии:
    677
    Что за несуразица? :nezn:
    А вообще сейчас полу-прозрачность мало кто использует, в основном сразу рисуют прозрачность, вот пример
    http://videokosmos.ru/
    Прозрачное, нарисованное меню.
    А вот здесьhttp://skycompany.ru/
    Я использовал прозрачный png (в шапке "Главная" "Услуги" и т.д.)

    В отличие от opacity, не меркнут краски у всей картинки, а только нужный фон.
    Если нужно, скину код для прозрачного png.
     
  6. Graph33

    Graph33 Создатель

    Регистр.:
    4 авг 2010
    Сообщения:
    33
    Симпатии:
    0
    с пнг есть свои косяки =)
    всегда если возможно делаю прозрачность через css
    кстати вот тут одна особенность прозрачности
    http://usabili.ru/news/2010/06/14/css_opacity_issue.html
     
  7. bork75

    bork75 The Team

    Регистр.:
    21 июн 2008
    Сообщения:
    1.451
    Симпатии:
    677
    Не знаю, не ловил косяки.

    А по ссылке, похоже, что человек что-то перемудрил в коде, его пример реально не работает, накидал свой, всё работает

    PHP:
    <style type="text/css">
    .
    content
    {
    opacity0.5;                   
    filteralpha(opacity=70);  
    }
    .
    container
    {
    opacity0.5;                   
    filteralpha(opacity=70);  
    }
    </
    style>
    </
    head>

    <
    div class="content" style="position: absolute; top: 84px; left: 84px; width: 1031px; height: 19px; z-index: 10">
    <
    a href="http://google.ru">Google</a>
    </
    div>

    <
    div class="container" style="position: absolute; top: 59px; left: 4px; height: 88px; z-index: 1; width:100%; background:#999">
    </
    div>
     
  8. sunyang

    sunyang

    Регистр.:
    25 апр 2009
    Сообщения:
    440
    Симпатии:
    30
    У меня почему-то прозрачный png не работает на ie((
     
  9. zzzkabanzzz

    zzzkabanzzz Создатель

    Регистр.:
    15 июн 2011
    Сообщения:
    56
    Симпатии:
    4
    Попробуйте так:
    PHP:
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);