Проблема с PNG-прозрачностью

Mila · August 4, 2010

Нашла в сети скрипт DD_belatedPNG_0.0.8a.js - он добавляет прозрачность рисункам в PNG.

Плюс сохраняет эту прозрачность для повторяющихся изображений. В общем, очередной чудо-скрипт.

Но, не долго я радовалась - уже на следующем сайте этот скрипт отказался работать.

Причем, срипт тот же самый, который нормально работал на предыдущем сайте.

Как назло, в теме для Wordpress, которую я верстаю на Денвере, масса PNG-шек.

Народ, если кто то сталкивался с таким глюком этого скрипта (или может это несовместимость с другими скриптами?), подскажите, как с этим бороться.

Vlad · August 5, 2010

Вот здесь посмотри

http://webimg.ru/faq/graficheskie-formaty/...n-v-formate-png

http://webimg.ru/faq/graficheskie-formaty/...tyu-v-formate-p

mishka · August 5, 2010

DD_belatedPNG_0.0.8a.js ненравится мне этот скрипт, но все же иногдаприходится применять, а основном для <img />.

Часто случаи были когда ховер не работал, но так чтобы вообще скрипт не работал небывало.

Дай код (можна архивом) чтобы разобраться в чем дело.

Mila · August 5, 2010

Vlad, фильтр я не могу использовать, т.к. на сайте есть повторяющиеся изображения, для них фильтр не работает.

А способ с behavior у меня не работает.

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

Вроде все правильно подключаю:

- iepngfix.htc и iepngfix_tilebg.js в папку scripts.

- файл transparent.gif в папку images.
- в файле iepngfix.htc исправляю путь к файлу transparent.gif  -  /wp-content/themes/my_themes/images/transparent.gif

- в файле header.php  прописываю:
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/scripts/iepngfix_tilebg.js"></script> 

- в стилях:

.corner { 
  position: absolute; top: 0; left: 0; 
  float: left;
  background: url('/wp-content/themes/my_themes/images/corner.png') repeat-y;
  width: 522px;
  height: 489px; 
  margin: 0;
  padding : 0; 
  z-index: 2;
}   

*html .corner { 
  behavior: url('/wp-content/themes/my_themes/scripts/iepngfix.htc');
}

Но изображение все одно непрозрачное.

mishka2, Script DD_belated можно скачать здесь http://www.dillerdesign.com/experiment/DD_belatedPNG/

Подключаю как обычно:

<!--[if IE 6]>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/scripts/DD_belatedPNG_0.0.8a.js"></script>

<script>
   DD_belatedPNG.fix('.corner'); 
</script>
<![endif]-->

Edited August 5, 2010 by Mila

Great Rash · August 6, 2010

Vlad, фильтр я не могу использовать, т.к. на сайте есть повторяющиеся изображения, для них фильтр не работает.

А повторяющиеся изображения случаем не однопиксельные?

Гифами вообще никак не обойтись?

Стоят ли на элементе, к которому применяете фикс какие-нить зумы, фильтры, экспрешны и т.п.?

Скрин с макета можно увидеть (может все-таки гифами обойдемся...)?

Может подключаются какие-то иные скрипты, которые конфликтуют с этим? (попробуйте поотключать все кроме DD_belatedPNG)

Попробуйте сверстать этот кусок в отдельном файле.

position: absolute; top: 0; left: 0;
float: left;

Странная запись - float: left; тут не нужен... (это так лирика)

Mila · August 6, 2010

А повторяющиеся изображения случаем не однопиксельные?
Гифами вообще никак не обойтись?

Повторяющееся изображение это фон страницы. он с тенью по краям, поэтому заменить его gif не получится.

Стоят ли на элементе, к которому применяете фикс какие-нить зумы, фильтры, экспрешны и т.п.?

Ничего такого нет. Вот стиль для этого элемента:

.midlle_image {
  width: 646px;
  margin: 0;
  padding: 0;
  background-image: url("/wp-content/themes/my_theme/images/midlle_image.png");
  background-repeat: repeat-y;
  background-position: left;
}

Может подключаются какие-то иные скрипты, которые конфликтуют с этим? (попробуйте поотключать все кроме DD_belatedPNG)

Только jquery.min.js

После его удаления ничего не изменилось.

DD_belatedPNG не просто не работает, после подключения любого класса к этому скрипту, фоновое изображение этого класса в IE 6 вообще исчезает.

Great Rash · August 6, 2010

Вы не ответили на следующие вопросы:

А повторяющиеся изображения случаем не однопиксельные?
Скрин с макета можно увидеть?

Попробуйте все-таки сделать кусок в отдельном файле.

Скрин покажите хотябы фона этого...

Mila · August 6, 2010

А повторяющиеся изображения случаем не однопиксельные?

Нет.

Скрин с макета можно увидеть?

Посмотрите - http://s41.radikal.ru/i094/1008/8e/551d287aefc2.jpg

Great Rash · August 6, 2010

По моему можно обойтись гифом. Ща сосряпаю пример.

Mila · August 6, 2010

Great Rash, там тень.

Как же гиф передаст тень?

Да, и кроме этого изображения там еще много прозрачных картинок с тенями.

Great Rash · August 6, 2010

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

Mila · August 6, 2010

Выкладывай.

Great Rash · August 6, 2010

Личку читайте. Картинки на том хостинге превратились в гифы и на них появился штамп...

Дал ссылку на хостинг получше.

Mila · August 7, 2010

Great Rash, я загрузила картинки на выбранный вами хостинг.

Mila · August 8, 2010

Great Rash, куда вы пропали?

Я давно загрузила картинки на выбранный вами хостинг.

Или вам нужны были только мои картинки?

psywalker · August 8, 2010

Great Rash, куда вы пропали?

Что Вы пристали, у парня сейчас выходные, он и так все будни трудится не покладая рук.

Mila · August 8, 2010

Я не пристала. Ваш парень сам вызвался помочь.

Если он занят и не может этого сделать, он бы не предлагал помощь, имхо.

Great Rash · August 9, 2010

Не знаю актуально ли еще... В пятницу так и не дождался ответа...

Просто GIF-ами конечно не сделать. Зато обошелся стандартными фильтрами без сторонних скриптов.


<!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" lang="ru">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html {
			font-size: 100.1%;
		}

		body {
			font: 62.5% 'Trebuchet MS', Arial, Tahoma, Verdana, sans-serif;
		}

		.cont {
			width: 646px;
		}

		.top {
			height: 46px;
			background: url('http://www.imageup.ru/img30/top_image400721.png') 0 0 no-repeat;
		}

		.bottom {
			height: 76px;
			background: url('http://www.imageup.ru/img30/bottom_image400723.png') 0 0 no-repeat;
		}

		.shadow {
			padding: 0 18px;
			background: url('http://www.imageup.ru/img114/middle_shadow402104.png') 0 0 repeat-y;
		}

		.content {
			padding: 15px;
			font-size: 1.4em;
			background: url('http://www.imageup.ru/img114/middle402100.png') 0 0 repeat-y;
		}
	</style>

	<!--[if IE 6]>
	<style type="text/css">
		.top {
			filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='http://www.imageup.ru/img30/top_image400721.png');
			background: none;
		}

		.bottom {
			filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='http://www.imageup.ru/img30/bottom_image400723.png');
			background: none;
		}

		.shadow {
			filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src='http://www.imageup.ru/img114/middle_shadow402104.png');
			background: none;
			zoom: 1;
		}
	</style>
	<![endif]-->

	<script type="text/javascript">

	</script>
</head>

<body>

	<div class="cont">
		<div class="top"></div>
		<div class="shadow">
			<div class="content">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae eros odio. Mauris vitae mauris elit, 
				non sagittis sapien. Aenean et eros lectus. Vivamus sodales dignissim massa, nec feugiat massa tincidunt 
				quis. Aliquam eu magna odio, sed luctus augue. Ut velit nisi, condimentum bibendum porttitor ultricies, 
				sodales et massa. Suspendisse adipiscing vehicula condimentum. Sed euismod malesuada nulla at lacinia. 
				Aliquam porta pharetra elementum. Morbi commodo elit at tortor ultricies at pellentesque mi ullamcorper. 
				Nulla sapien ligula, hendrerit quis cursus sit amet, pharetra non orci. Proin nec eros id magna pharetra 
				fringilla non a erat. Etiam justo orci, sodales semper convallis vitae, porttitor vel diam. Integer 
				pellentesque iaculis dolor quis fringilla.<br />
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae eros odio. Mauris vitae mauris elit, 
				non sagittis sapien. Aenean et eros lectus. Vivamus sodales dignissim massa, nec feugiat massa tincidunt 
				quis. Aliquam eu magna odio, sed luctus augue. Ut velit nisi, condimentum bibendum porttitor ultricies, 
				sodales et massa. Suspendisse adipiscing vehicula condimentum. Sed euismod malesuada nulla at lacinia. 
				Aliquam porta pharetra elementum. Morbi commodo elit at tortor ultricies at pellentesque mi ullamcorper. 
				Nulla sapien ligula, hendrerit quis cursus sit amet, pharetra non orci. Proin nec eros id magna pharetra 
				fringilla non a erat. Etiam justo orci, sodales semper convallis vitae, porttitor vel diam. Integer 
				pellentesque iaculis dolor quis fringilla.<br />
			</div>
		</div>
		<div class="bottom"></div>
	</div>

</body>
</html>

Хотя серединку можно и гифкой сделать, все же гиф поменьше чем пнг24 весит...

psywalker · August 9, 2010

Не знаю актуально ли еще.

Актуально, видишь, ждёт тебя девчушка, волнуется, спрашивала.

Great Rash · August 9, 2010

Ну это когда было...

psywalker · August 9, 2010

Ну это когда было...

Как когда, вчера вечером.

Great Rash · August 9, 2010

Дык за вечер можно такого наворотить при желании! Может проблема уже и отпала сама собой. Вообще я все больше убеждаюсь, что если приложить голову, то в ИЕ все проблемы с png24 (ну 80% точно) можно порешать без использования .htc, яваскрипта, VML и т.п.

Хотя я все еще не оставляю идею написать на яваскрипте VML-исправлялку для png24, но это чисто академический интерес ибо скорость в ИЕ6 походу упадет в разы...

Mila · August 9, 2010

Great Rash, да, я уже придумала, как это исправить.

Но, все равно спасибо - попробую и ваш способ.

Sign In

Проблема с PNG-прозрачностью

Question

Link to comment

Share on other sites

22 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information