Png24 и opacity

DjTarik · May 11, 2011

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

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

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

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

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

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

Спасибо.

psywalker · May 11, 2011

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

mishka · May 11, 2011

пробуй так:

Применить к пнг фильтр ( 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 · May 11, 2011

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

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

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

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

psywalker · May 11, 2011

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

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

Это уже старая бага ИЕ, и помоему лекарства нет, так что делай картинку заранее прозрачную)
Да ну, не может быть...
Проблема в том, что потом мне надо плавно показывать и скрывать это изображения. А значит - твой вариант не прокатит...
Как делают "лайтбоксы" тогда? Хотя я не много таких видел)

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

mishka · May 11, 2011

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

DjTarik · May 11, 2011

пробуй так:
Применить к пнг фильтр ( 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 · May 12, 2011

пробуй так:
Применить к пнг фильтр ( 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 · May 12, 2011

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

DjTarik · May 16, 2011

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

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

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

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

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

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

Sign In

Png24 и opacity

Question

DjTarik

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

DjTarik

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

DjTarik

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

DjTarik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information