Прозрачный слой в таблице.

zIP · 14 Авг 2006

Прозрачный слой в таблице.

Делаю прозрачный фон в таблице:

PHP:

.div         { border:1px dotted #808080; 
				filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
				-moz-opacity: 0.5;
				-khtml-opacity: 0.5;
				opacity: 0.5; 
				background-color:#E0E0E0 
			 }

PHP:

 <table class=\"div\" border=\"0\" width=\"744\" id=\"table1\" cellspacing=\"0\" cellpadding=\"0\" height=\"100%\">
		<tr>
			<td align=center valign=top> 
....
 
			</td>

		</tr>
	</table>

Так вот, если вставляю данные в таблицу, то получаеться, что текст находиться под этим слоем.
Нужно как-то указывать расположение этого слоя?

SelenIT · 14 Авг 2006

Это делает полупрозрачной всю таблицу, а не ее фон. И для этого достаточно обычного filter:alpha(opacity=50) - у него заодно и совместимость шире (чуть ли не с IE4).

А filter

rogid

XImageTransform нужен для поддержки полупрозрачного PNG, но сделать с его помощью прозрачным только фон, AFAIK, невозможно.

zIP · 15 Авг 2006

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

an_kalinovski · 15 Авг 2006

z-index

SelenIT · 15 Авг 2006

zIP
Да, еще: filter

rogid

XImageTransform ведет себя так, будто все, к чему он применен - картинка. Поэтому и текст становится недоступен. Но тебе этот фильтр вообще не нужен. А если нужно положить нормальный текст на полупрозрачный фон - придется делать 2 абсолютно позиционированных слоя, друг поверх друга. Имхо, овчинка не стоит выделенки...

zIP · 15 Авг 2006

Автор оригинала: SelenIT
zIP
Да, еще: filterrogidXImageTransform ведет себя так, будто все, к чему он применен - картинка. Поэтому и текст становится недоступен. Но тебе этот фильтр вообще не нужен. А если нужно положить нормальный текст на полупрозрачный фон - придется делать 2 абсолютно позиционированных слоя, друг поверх друга. Имхо, овчинка не стоит выделенки...

Хорошо, только тогда я не понял как сделать полупрозрачным один из слоев.

-~{}~ 15.08.06 12:03:

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

SelenIT · 15 Авг 2006

Чтобы сделать полупрозрачным один из слоев - их должно быть больше одного

Пример:

Код:

<style type="text/css">
   #layer { position: relative; }
   #layer div {
      position: absolute;
      background: url(...);
      filter:alpha(opacity=50);
      -moz-opacity: 0.5;
      -khtml-opacity: 0.5;
      opacity: 0.5;
      width: 100%;
      height: 100%;
   }
   #layer table { position: absolute; }
</style>
...
<div id="layer"><div>&amp;nbsp;</div><table>
      <tr><td>It's a Text</td></tr>
   </table>
</div>
<script type="text/javascript">
var div = document.getElementById("layer");
div.style.height = div.childNodes[1].offsetHeight + "px";
</script>

Z-index тут явно не указан, но у таблицы он выше, т.к. она идет после полупрозрачного дива. Общий контейнер позволяет не париться координатами таблицы, но его высоту прходится подгонять с помощью JS.

zIP · 15 Авг 2006

Несколько не определенный вопрос, но может какие нибудь предположения будут?

PHP:

<style type="text/css">
body  { background: url('images/bg2.gif'); font-size:12px  }
   #layer { position: relative; }
   #layer div {
      position: absolute;
      background: #666666;
      filter:alpha(opacity=30);
      -moz-opacity: 0.3;
      -khtml-opacity: 0.3;
      opacity: 0.3;
      width: 100%;
      height: 100%
   }
   #layer table { position: absolute; }
</style>

</head>

<div id="layer"><div></div>
	<table style="position: absolute; left: 0px; top: 0px" width="100%" height="100%">
      <tr>
<td>
<table border="1" width="100%" id="table1" align="left" height="100%">
	<tr>
		<td>&nbsp;</td>
	</tr>
</table>
		</td></tr>
   </table>
</div>
<script type="text/javascript">
var div = document.getElementById("layer");
div.style.height = div.childNodes[1].offsetHeight;
</script>

Все отображаеться в браузере нормально. Но стоит мне вставить инклюдом этот кусок в скрипт, то у меня ее перекашивает и отказываеться отображаться по человечески.

Где можно порыть, в каком направлении? Все что знал и мог уже перепробовал.

SelenIT · 15 Авг 2006

Во-первых, вставлять этот пример одним куском некорректно, в частности, стили желательно вставлять в единственный <head> документа. Во-вторых, пример был упрощен до предела, в реальных условиях скорее всего придется подгонять не только высоту полупрозрачного фона, но и ширину. А то и класть это все в еще один контейнер с position: absolute. Ну и следить, чтобы id-ы на странице случайно не пересеклись...

zIP · 15 Авг 2006

Я вставлял не одним куском.
Я добавлял стиль в внешний файл.
Скрипт тоже в отдельный файл.

Также пробовал вставлять одним куском.

Иды просмотрел. Вроде не пересекаються.
Высоту и ширину поставил 100% относительно 0, 0.

-~{}~ 15.08.06 15:35:

В общем дело в следующем.

Если просто использовать этот кусок, в чистом виде, то все работает.

А вот если попытаться его втиснуть куда нибудь еще, к примеру в другую таблицу, в отдельную ее ячейку, то получаеться ерунда.

SelenIT · 16 Авг 2006

Сложно сказать, не видя кода - к этой таблице могли каскадно примениться какие угодно CSS-правила от родительских элементов. Можно попробовать идти от простого примера, постепенно добавляя в него фрагменты сложного - так больше шансов отловить момент появления ерунды. А вообще я предупреждал, что мороки будет много и стоит задуматься о целесообразности этой возни с прозрачностью. Иногда можно неплохо сымитировать полупрозрачность просто за счет яркости фона.

zIP · 16 Авг 2006

После перебора множества вариантов нашел тот, которой мне подошел.

Задаем стиль:

Код:

body { background-position: 0% 0%; background-image:url('bg2.gif'); background-repeat:repeat; background-attachment:scroll;  padding: 0}
.contTrans {position: relative}
.table { border:1px solid #CFCFCF; color: red; font-weight: bold; position: relative; z-index: 1}
.trans {
    position: absolute;
    z-index: 0;
    filter: alpha(opacity=20);
    -moz-opacity: 0.2;
    -khtml-opacity: 0.2;
    opacity: 0.2;
    background: url("texture.png");
}

Где texture.png - полупрозрачная.

Java Script для подгонки размеров контейнера:

PHP:

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";
            }
        }
}

Непосредственно контейнер:

PHP:

<div class='contTrans' align=\"left\">
<div class='trans' align=\"center\"></div>
<table class='table' width=100% height=100%>
<tr><td valign=\"top\">

Любой текст или таблица ....

</td></tr>
</table>
</div>
</body>
</html>

Этот контейнер можно помещать в любой части документа.
Текст или объект в контейнере не перекрываеться альфой слоя.

.

-~{}~ 16.08.06 06:39:

?

-~{}~ 16.08.06 06:40:

Интересно, а почему я не могу отредактировать свое последнее сообщение?

Прозрачный слой в таблице.

zIP

Новичок

SelenIT

IT-лунатик :)

zIP

Новичок

an_kalinovski

Новичок

SelenIT

IT-лунатик :)

zIP

Новичок

SelenIT

IT-лунатик :)

zIP

Новичок

SelenIT

IT-лунатик :)

zIP

Новичок

SelenIT

IT-лунатик :)

zIP

Новичок