Jump to content
  • 0

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

Mila

Asked by Mila,

 Share

Question

Mila Explorer

Mila

Posted
Posted

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

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

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

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

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

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

Link to comment
Share on other sites

22 answers to this question

Recommended Posts

  • 0
mishka Explorer

mishka

Posted
Posted

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

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

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

Link to comment
Share on other sites
  • 0
Mila Explorer

Mila

Posted
  • Author
Posted (edited)

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 by Mila
Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

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

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

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

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

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

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

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

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

float: left;

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

Link to comment
Share on other sites
  • 0
Mila Explorer

Mila

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

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

Повторяющееся изображение это фон страницы. он с тенью по краям, поэтому заменить его 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 вообще исчезает.

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted

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

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

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

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

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

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted

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

Просто 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 весит...

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept