Большой Воронежский Форум
» Веб-дизайн>html - проблема прозрачности и теней
][irurg 21:17 06.06.2009
Здравствуйте.
Подскажите по такому вопросу - необходимо разместить на пестром фоне картинку, отбрасывающую тень. Эксперименты на тестовом образце дали такой результат - картинка сохраненная в png-24 адекватно отображается в опера но неадекватно в ие6 (на скринах ). gif - не получилось ни в одном из вариантов.
Есть ли способ сделать эту тень красиво хотя бы для ие6-7 и опера ?
спасибо.
Изображения
  
[Ответ]
VaUlt 21:20 06.06.2009
][irurg, ключевое слово "пнг с альфаканалом в ИЕ6" [Ответ]
DRON-ANARCHY 22:12 06.06.2009
....................
Изображения
[Ответ]
][irurg 22:59 06.06.2009
VaUlt, DRON-ANARCHY, спс большое, разобрался. для тех кто в столкнется в дальнейшем два неплохих ресурса
http://www.webreview.org.ua/index.ph...etail&ar_id=29
http://designformasters.info/posts/c...-transparency/ [Ответ]
][irurg 08:31 25.06.2009
Здравствуйте, в развитие темы прозрачности
Задача - на странице размещен контейнер <div class=my> Some text <div> на некотором фоне.
стиль включает описание прозрачности
.my { ....
filter: Alpha(Opacity=60);
opacity: 0.6; }

проблема в том что текст расположенный в контейнере тоже становится прозрачным - наследование... (. отменить наследование как понимаю нельзя. пробовал расположить в этом контейнере еще один непрозрачный а в нем уже текст -тоже безрезультатно.
возможно ли оставить контейнер прозрачным а текст -нет ?
спасибо. [Ответ]
alemiks 08:48 25.06.2009
http://www.hedgerwow.com/360/dhtml/c...y-inherit.html [Ответ]
][irurg 13:27 25.06.2009
alemiks, спасибо хороший пример. к сожалению не совсем подошел в моей ситуации. корректно работает если фоновая картинка стит на body. у меня она установлена на table, в ячейке которой располагаю div. в этом случае в опере не отрабатывает - не появляется прозрачный фон.
насколько понял в оргинале благодаря z-index:-1 переносится прозрачный фон за текст, но перед боди, а если таблица - то прозрачный элемент получается видимо за ней. в ие все корректно отрабатывает даже на таблице.
убираем z-index:-1 или увеличиваем его -возращаемся на исходные, текст прозрачен
Буду признателен за помощь, чет никак не соображу как выкрутится. вижу тольок вариант прозрачного png и замостить этот див а по нему уже писать текст, но как то некошерно
html
Код:
...
<TABLE >
<TR>
<TD>
<div class="main">
<div class="bd">
<p>
..Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
<p>
</div>
<div class="ft"></div>
</div>
</TD>
</TR>
</TABLE>
css
Код:
table {height:100%; margin:0;background:#000 url(images/fon.jpg) 0 no-repeat; }
.main {	width:45em;
overflow:hidden;
margin:32px auto;
color:#000;
position:relative;
filter:Alpha(opacity=50);
_background:#fff;
_position:static;
}
.bd{
zoom:1;
padding:22px;
font:72%/1.6 Arial;
position:relative;
}
.ft{
background:#fff;
position:absolute;
top:0;left:0;right:0;bottom:0;
z-index:-1;
opacity:0.5;
*position:static;
*opacity:1;
*background:transparent;
}
[Ответ]
alemiks 17:47 25.06.2009

Сообщение от ][irurg:
убираем z-index:-1 или увеличиваем его -возращаемся на исходные, текст прозрачен

мне кажется, это не текст прозрачный, а поверх текста накладывается .ft
если меняешь z-index для .ft, то надо явно прописать и для .bd (больше, чем у .ft) [Ответ]
][irurg 21:37 27.06.2009
решил проблему с оперой в лоб - нарисовал png точку нужной прозрачности и растянул по бекграунду элемента, а уже поверху текст
задрала уже эта прозрачность, не рад что связался (
еще вылезла проблема - в ие после замены изображаения через скрипт картинка отказывается реагироватать на указанное событие. пробовал разные варианты скрипта - нет реакции. если разместить другой элемент например картинку jpg - на ней работает.
вот код от tigir-а:
Код:
// fixPNG(); http://www.tigir.com/js/fixpng.js (author Tigirlas Igor)
function fixPNG(element)
{
	if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent))
	{
		var src;
		if (element.tagName=='IMG')
		{
			if (/\.png$/.test(element.src))
			{
				src = element.src;
				element.src = "blank.gif";
			}
		}
		else
		{
			src = element.currentStyle.backgroundImage.match(/url\("(.+\.png)"\)/i)
			if (src)
			{
				src = src[1];
				element.runtimeStyle.backgroundImage="none";
				
			}
		}
		if (src)
element.runtimeStyle.filter +="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='crop')";
хтмл:
Код:
....
<a href="images/ris1.png" width="232" height="159"  class="ris"  onclick="click(this);" /> 
....
собственно обработчик click не срабатывает в ие, но работает в опера. возможно ли победить это?
идея подмены проста - как понимаю ищутся картинки на стр, подменяются на прозрачный гиф врменно а потом применяется собственно фильтр пнг. абсолютно непонятно почему отрубается обработка событий - в коде html обработчик присутствует но просто не срабатывает [Ответ]
Вверх