VPF::Прозрачность фона в таблице - Форум программистов

Max_a

Дата 5.12.2005, 10:54 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

Подскажите плиз можно ли задавать прозрачность фона в таблице и если да, то как?

Ciber SLasH

Дата 5.12.2005, 16:34 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 15
Всего: 67

Нет

R.M.

Дата 6.12.2005, 10:58 (ссылка)

(нет голосов)

Загрузка ...

Анархист

Профиль
Группа: Участник
Сообщений: 2164
Регистрация: 8.6.2005
Где: Питер

Репутация: 9
Всего: 30

Max_a
Сдлать можно всё (по крайней мере прозрачность для дива есть, значит думаю и таблица её поймёт) но у прозрачности есть один минус который врядли тебя устроит - прозрачным стаёт всё что находится внутри прозрачного блока. Ещё смотря длячего это нужно, может стоит пихнуть прозрачный гиф 1х1 в бэкграунд таблицы? Опиши задачу выходы могут быть разные.

--------------------

Помнишь как бодрили дискотеки прошлого века? Теперь стул, компьютер и нету человека.

Nokia LifeStyle - Всё для смартфонов Nokia

Max_a

Дата 6.12.2005, 11:15 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

Хотел просто чтобы фон вложенной таблицы просвечивал фон предыдущей.

Так понимаю, что сделать это проще с помощью создания нового, типа прозрачного фона в фотошопе.

Str!pe

Дата 6.12.2005, 16:05 (ссылка)

(нет голосов)

Загрузка ...

профиль удален

Профиль
Группа: Участник
Сообщений: 2426
Регистрация: 12.6.2005
Где: На земле.

Репутация: 3
Всего: 152

Max_a
Фон однородный? нет всяких вкраплений? Если взять одну картинку 1 на 1 пиксель сделать ее фоном в таблице, сделать для картинки прозрачность в PNG, а затем что бы и ослик понимал, что ты хочешь, выставить с помощью фильтров прогзарчность, то тогда можно... я где то уже описывал это на форуме, приводил список всех фильтров (смотри старые темы про прозрачность).

Это сообщение отредактировал(а) Stripe - 6.12.2005, 16:09

--------------------

Со мной можно связаться по скайпу или по аське.
Занимаюсь продвижением сайтов - самой таргетированной рекламой.

R.M.

Дата 7.12.2005, 01:27 (ссылка)

(нет голосов)

Загрузка ...

Анархист

Профиль
Группа: Участник
Сообщений: 2164
Регистрация: 8.6.2005
Где: Питер

Репутация: 9
Всего: 30

Stripe

Цитата(Stripe @ 6.12.2005, 17:05)

сделать для картинки прозрачность в PNG

чтобы ИЕ понимал PNG как надо, придёца behavior прописывать

Max_a
Непонимаю, зачем таблице делать прозрачность если она по дефолту прозрачная?
Добавлено @ 01:27
Дай кусок кода чтобы было понятнее чего ты хочешь

--------------------

Ciber SLasH

Дата 7.12.2005, 01:54 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 15
Всего: 67

Цитата

Непонимаю, зачем таблице делать прозрачность если она по дефолту прозрачная?

Он имеет ввиду таблицу с бэкграундом, у которой сквозь бэкграунд будет просвечиваться фон документа.

Как я уже сказал: нельзя такое сделать в таблице, но можно сделать общий слой, в который запихнуть таблицу и ещё один слой у которого будет фон полу-прозрачный с z-index'ом меньшим, чем у таблицы.

Str!pe

Дата 7.12.2005, 05:31 (ссылка)

(нет голосов)

Загрузка ...

профиль удален

Профиль
Группа: Участник
Сообщений: 2426
Регистрация: 12.6.2005
Где: На земле.

Репутация: 3
Всего: 152

Ciber SLasH

Можно говорю smile

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>

<body>
<table width="100%" height="100%" border="1" cellspacing="20" cellpadding="20" background="left_column_img_06.gif">
  <tr>
    <td height="100%" width="50%" background="gif.gif"><p>А вот тут PNG фоном стоит для которого прописан следующий стиль: style="filter: alpha(opacity=50, style=0); background-image: url(png.png);"</p></td>
    <td height="100%" width="50%" style="filter: alpha(opacity=50, style=0); background-image: url(png.png);"><p>1</p></td>
  </tr>
</table>

</body>
</html>

А вот PNG должен быть прозрачным на 50% к примеру. Ниже выложил специально 50% прозрачность на черном цвете. Оттестировал в Opere и IE.

Это сообщение отредактировал(а) Stripe - 7.12.2005, 05:44

Присоединённый файл ( Кол-во скачиваний: 13 )

png.png 0,39 Kb

--------------------

R.M.

Дата 7.12.2005, 11:00 (ссылка)

(нет голосов)

Загрузка ...

Анархист

Профиль
Группа: Участник
Сообщений: 2164
Регистрация: 8.6.2005
Где: Питер

Репутация: 9
Всего: 30

Работать то работает но на твоём примере вместе с фоном просвечивает и содержимое, как я писал выше.

--------------------

Ciber SLasH

Дата 7.12.2005, 12:51 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 15
Всего: 67

2Stripe:

Цитата

Работать то работает но на твоём примере вместе с фоном просвечивает и содержимое, как я писал выше.

Вот об этом я и говорю. Какой смысл в полу-прозрачном фоне, если вместе с фоном становится полу-прозрачным и текст?

Вот другое решение:

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251'>
<meta name="Generator" content='EditPlus 2.20.211'>
<meta name="Author" content='Ciber SLasH'>
<title>Имитация полу-прозрачного background-а таблицы</title>
<style type='text/css'>
body {background: navy}
.contTrans {position: relative}
table {color: red; font-weight: bold; position: relative; z-index: 1}
.trans {
    width: 310px;
    height: 325px;
    position: absolute;
    z-index: 0;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    background: url("texture.png");
}
</style>
</head>

<body>
<div class='contTrans'>
<div class='trans'></div>
<table>
<tr><td>11111111111111111111111111111111111111</td></tr>
<tr><td>22222222222222222222222222222222222222</td></tr>
<tr><td>11111111111111111111111111111111111111</td></tr>
<tr><td>22222222222222222222222222222222222222</td></tr>
<tr><td>11111111111111111111111111111111111111</td></tr>
<tr><td>22222222222222222222222222222222222222</td></tr>
<tr><td>11111111111111111111111111111111111111</td></tr>
<tr><td>22222222222222222222222222222222222222</td></tr>
<tr><td>11111111111111111111111111111111111111</td></tr>
<tr><td>22222222222222222222222222222222222222</td></tr>
<tr><td>11111111111111111111111111111111111111</td></tr>
<tr><td>22222222222222222222222222222222222222</td></tr>
<tr><td>11111111111111111111111111111111111111</td></tr>
<tr><td>22222222222222222222222222222222222222</td></tr>
</table>
</div>
</body>
</html>

но здесь жёстко заданы размеры блока с полу-прозрачным фоном, а как сделать относительные координаты (чтобы работало во всех браузерах) на CSS я не знаю. Но можно JavaScript-ом выставить правильные размеры блоку:

Код

function setStyle() {
var transDIVs = document.getElementsByTagName("DIV");

    for (var i = 0; i < transDIVs.length; i++)
        if (transDIVs[i].className == 'trans') {
            if (window.clipboardData) {  // проверка на IE
                transDIVs[i].style.width = transDIVs[i].parentElement.lastChild.offsetWidth + "px";
                transDIVs[i].style.height = transDIVs[i].parentElement.lastChild.offsetHeight + "px";
            } else {
                transDIVs[i].style.width = transDIVs[i].parentNode.childNodes[3].offsetWidth + "px";
                transDIVs[i].style.height = transDIVs[i].parentNode.childNodes[3].offsetHeight + "px";
            }
        }
}

вписываем в BODY: onLoad='setStyle()' и убираем width и height в классе .trans

Str!pe

Дата 10.12.2005, 09:54 (ссылка)

(нет голосов)

Загрузка ...

профиль удален

Профиль
Группа: Участник
Сообщений: 2426
Регистрация: 12.6.2005
Где: На земле.

Репутация: 3
Всего: 152

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

Надеюсь ты не против smile

--------------------

R.M.

Дата 10.12.2005, 10:24 (ссылка)

(нет голосов)

Загрузка ...

Анархист

Профиль
Группа: Участник
Сообщений: 2164
Регистрация: 8.6.2005
Где: Питер

Репутация: 9
Всего: 30

А не проще сделать просто PNG с какой вам угодно прозрачностью (а также фоном, рисунком и т.д.и т.п.) и сунуть в бэкграунд? И код значительно уменьшится smile

--------------------

Ciber SLasH

Дата 11.12.2005, 23:31 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 15
Всего: 67

Цитата

А не проще сделать просто PNG с какой вам угодно прозрачностью

Проще, но IE альфа-канал PNG-шек не понимает.

Цитата(Stripe @ 10.12.2005, 09:54)

Твой вариант лучше, сдираю и выкладываю в собственное FAQ smile Надеюсь ты не противsmile

Да пожалуйста... smile

R.M.

Дата 12.12.2005, 09:18 (ссылка)

(нет голосов)

Загрузка ...

Анархист

Профиль
Группа: Участник
Сообщений: 2164
Регистрация: 8.6.2005
Где: Питер

Репутация: 9
Всего: 30

Ciber SLasH

Цитата(Ciber @ 12.12.2005, 00:31)

Проще, но IE альфа-канал PNG-шек не понимает.

Дык можно ему в этом помочь

Код


<style type="text/css">
.png { //background-image: none ! important; behavior: url('pngfix.htc');}
</style>
<img src=1x1.gif style="background-image: url('logo.png');" class="png" width="175" height="135">

а pngfix.htc такой

Код


<public:component>
    <script language="JavaScript">
        element.runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + style.backgroundImage.substr( 4, style.backgroundImage.length - 5 ) + '", sizingMethod="crop")'
        element.className += ''
    </script>
</public:component>

Добавлено @ 09:20
Если на серваке возникнет проблема пропиши полный путь т.к. вообще для behavior'а нужен полный путь smile

--------------------

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »