Png24 и opacity

[DjTarik]

Есть такая проблема:

Если есть слой с полупрозрачностью (png24) и к нему применить CSS-прозрачность (opacity) - в IE полупрозрачные области становятся тёмными.

Может я чего-то не знаю? Как решить данную проблему?

Это первый вопрос =)

Для удобства - тестовая страница: http://tarik.kasperovich.ru/test_16/filters.html

P.S. Слева - без CSS-прозрачности, справа - с ней. Смотреть в IE.

Спасибо.

[psywalker]

Это уже старая бага ИЕ, и помоему лекарства нет, так что делай картинку заранее прозрачную)

[mishka]

пробуй так:

Применить к пнг фильтр ( filter:progid:dximagetransform.microsoft.alphaimageloader(src='img.png', sizingMethod='crop'); ) для ие7-8 тоже этот фильтр юзать.

Опаситив применить к родителю, так как насколько я знаю два фильтра к одному элементу не применить, если кто знает как - отпишите.

Или вместо фильтра примени джс DD_belatedPNG, но чтобы он сработал и в ие8, его (ие8) нужно перевести в режим эмуляции ие7( <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> ).

[DjTarik]

Это уже старая бага ИЕ, и помоему лекарства нет, так что делай картинку заранее прозрачную)

Да ну, не может быть...

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

Как делают "лайтбоксы" тогда? Хотя я не много таких видел)

[psywalker]

пробуй так:

Применить к пнг фильтр ( filter:progid:dximagetransform.microsoft.alphaimageloader(src='img.png', sizingMethod='crop'); ) для ие7-8 тоже этот фильтр юзать.

Опаситив применить к родителю.

Ага, хрен там было медведь, так кажись тоже не пашет. Такая же хрень выходит.

Это уже старая бага ИЕ, и помоему лекарства нет, так что делай картинку заранее прозрачную)

Да ну, не может быть...

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

Как делают "лайтбоксы" тогда? Хотя я не много таких видел)

Лайтбоксы просто делаются. Потихоньку делаешь прозрачным картинку, и всё. Необязательно пнг.

[mishka]

Ну что пробовал как я советовал? Получилось? С джс должно было получится.

[DjTarik]

пробуй так:

Применить к пнг фильтр ( filter:progid:dximagetransform.microsoft.alphaimageloader(src='img.png', sizingMethod='crop'); ) для ие7-8 тоже этот фильтр юзать.

Опаситив применить к родителю, так как насколько я знаю два фильтра к одному элементу не применить, если кто знает как - отпишите.

Или вместо фильтра примени джс DD_belatedPNG, но чтобы он сработал и в ие8, его (ие8) нужно перевести в режим эмуляции ие7( <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> ).

Добавил родителя. Обновил ту же тестовую страницу. У кого есть IE 6-9 - гляньте плиз. В 8-ке вроде норм.

Конечно тени сильно отличаются, но это хоть что-то...

пробуй так:

Применить к пнг фильтр ( filter:progid:dximagetransform.microsoft.alphaimageloader(src='img.png', sizingMethod='crop'); ) для ие7-8 тоже этот фильтр юзать.

Опаситив применить к родителю.

Ага, хрен там было медведь, так кажись тоже не пашет. Такая же хрень выходит.

Это уже старая бага ИЕ, и помоему лекарства нет, так что делай картинку заранее прозрачную)

Да ну, не может быть...

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

Как делают "лайтбоксы" тогда? Хотя я не много таких видел)

Лайтбоксы просто делаются. Потихоньку делаешь прозрачным картинку, и всё. Необязательно пнг.

Так вся засада именно в полупрозрачности. Наверное из-за этого её там никто не юзает или для ие пишут стили без пнг...

[psywalker]

пробуй так:

Применить к пнг фильтр ( filter:progid:dximagetransform.microsoft.alphaimageloader(src='img.png', sizingMethod='crop'); ) для ие7-8 тоже этот фильтр юзать.

Опаситив применить к родителю, так как насколько я знаю два фильтра к одному элементу не применить, если кто знает как - отпишите.

Или вместо фильтра примени джс DD_belatedPNG, но чтобы он сработал и в ие8, его (ие8) нужно перевести в режим эмуляции ие7( <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> ).

Добавил родителя. Обновил ту же тестовую страницу. У кого есть IE 6-9 - гляньте плиз. В 8-ке вроде норм.

Конечно тени сильно отличаются, но это хоть что-то...

пробуй так:

Применить к пнг фильтр ( filter:progid:dximagetransform.microsoft.alphaimageloader(src='img.png', sizingMethod='crop'); ) для ие7-8 тоже этот фильтр юзать.

Опаситив применить к родителю.

Ага, хрен там было медведь, так кажись тоже не пашет. Такая же хрень выходит.

Это уже старая бага ИЕ, и помоему лекарства нет, так что делай картинку заранее прозрачную)

Да ну, не может быть...

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

Как делают "лайтбоксы" тогда? Хотя я не много таких видел)

Лайтбоксы просто делаются. Потихоньку делаешь прозрачным картинку, и всё. Необязательно пнг.

Так вся засада именно в полупрозрачности. Наверное из-за этого её там никто не юзает или для ие пишут стили без пнг...

Да, с фильтром пашет, но юзать для ИЕ7-8 фильтры, это конечно не айс. Плюс будут проблемы с ссылками внутри блоков, да и вообще.

Вот, зацени примерчик:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Тестовая страница - 'filters' - Tarik (11.05.2011)</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<style type="text/css" media="all">
	/* <![CDATA[ */

		.wrapper {
			width: 800px;
			padding: 50px;
			margin: 200px auto;
			background: #aaa;
			overflow: hidden;
		}

		.png24-left,
		.png24-right,.a {
			width: 100px;
			height: 100px;
			display: block;
			background: url(http://tarik.kasperovich.ru/test_16/img/filters/test.png) no-repeat;
		}
		.png24-left {
			float: left;
		}
		.png24-right,.a{
			float: right;
			border: 1px solid #000;
		}

		.parent {
			float: right;
			opacity: 0.5;
		}


	/* ]]> */
	</style>

	<!--[if IE]>
		<style type="text/css" media="all">
		/* <![CDATA[ */

			.png24-left,
			.png24-right {
				background: none;
				filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src="http://tarik.kasperovich.ru/test_16/img/filters/test.png", sizingMethod="image");
			}

			.parent {
				filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
			}

		/* ]]> */
		</style>
	<![endif]-->

</head>
<body>

	<div class="wrapper">


		<div class="png24-left" title="Полупрозрачный блок слева"><!-- // --></div>

		<div class="parent">
			<span class="png24-right" title="Полупрозрачный блок справа"><a href="#" class="a">fsfd</a></span>
		</div>

	</div>


	<!-- // © Tarik, 2011 // -->

</body>
</html>

[mishka]

А используя джс, можно обойтись без родительского блока.

[DjTarik]

Вроде вот так все работает:

http://tarik.kasperovich.ru/test_16/filters.html

-при наведении на левый круг, должен плавно появится правый.

У кого есть IE7 - проверьте, плиз... У меня в 8-ке пашет, в эмуляторе тоже... 7-ку не могу посмотреть.

P.S. Это когда один элемент и не тянется... Ща буду пробовать для полупрозрачного блока со скругленными углами)

P.P.S. Причём у меня есть попап свой, в котором это всё работает...