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

S

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:
 
читай про RGBA, чтобы только фону задавалась прозрачность
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

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

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

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

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>

Я применяю фон уже не для всей ячейки, а только для ячеек в таблице и для них же прозрачность. Проверил. работает.
 
bork75 написал(а):
Получается, что сначала идёт ячейка, которой задан фон, а сверху (внутри) ещё таблица. Т.к. прозрачность задана для ячейки, то этот параметр и применяется для таблицы, которая внутри.
Фу, надеюсь понятно объяснил.
Правильнее так.
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>
Я применяю фон уже не для всей ячейки, а только для ячеек в таблице и для них же прозрачность. Проверил. работает.
Нажмите для раскрытия...


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

Добавлено через 5 минут
mdss написал(а):
читай про RGBA, чтобы только фону задавалась прозрачность
*** скрытое содержание ***
там как для нормальных браузеров прописать и костыль для ишака
Нажмите для раскрытия...
Классная вещица, жаль на даже не очень старых броузерах не работает((
Будем ждать, когда придумают нормальную прозрачность)
 
Что за несуразица? :nezn:
А вообще сейчас полу-прозрачность мало кто использует, в основном сразу рисуют прозрачность, вот пример
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

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

Я использовал прозрачный png (в шапке "Главная" "Услуги" и т.д.)

В отличие от opacity, не меркнут краски у всей картинки, а только нужный фон.
Если нужно, скину код для прозрачного png.
 
bork75 написал(а):
Что за несуразица? :nezn:
А вообще сейчас полу-прозрачность мало кто использует, в основном сразу рисуют прозрачность, вот пример
*** скрытое содержание ***
Прозрачное, нарисованное меню.
А вот здесь*** скрытое содержание ***
Я использовал прозрачный png (в шапке "Главная" "Услуги" и т.д.)
В отличие от opacity, не меркнут краски у всей картинки, а только нужный фон.
Если нужно, скину код для прозрачного png.
Нажмите для раскрытия...
с пнг есть свои косяки =)
всегда если возможно делаю прозрачность через css
кстати вот тут одна особенность прозрачности
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
 
Graph33 написал(а):
с пнг есть свои косяки =)
всегда если возможно делаю прозрачность через css
кстати вот тут одна особенность прозрачности
Нажмите для раскрытия...

Не знаю, не ловил косяки.

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

PHP: 
<style type="text/css">
.content
{
opacity: 0.5;                   
filter: alpha(opacity=70);  
}
.container
{
opacity: 0.5;                   
filter: alpha(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>
 
bork75 написал(а):
Что за несуразица? :nezn:
А вообще сейчас полу-прозрачность мало кто использует, в основном сразу рисуют прозрачность, вот пример
*** скрытое содержание ***
Прозрачное, нарисованное меню.
А вот здесь*** скрытое содержание ***
Я использовал прозрачный png (в шапке "Главная" "Услуги" и т.д.)
В отличие от opacity, не меркнут краски у всей картинки, а только нужный фон.
Если нужно, скину код для прозрачного png.
Нажмите для раскрытия...

У меня почему-то прозрачный png не работает на ie((
 
Попробуйте так:
PHP: 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху