Jump to content
  • 0

Опять про прозрачный PNG в IE6


Vlad
 Share

Question

Тема добавления рисунка в формате PNG-24 с прозрачными участками в IE6 всячески обсосана и раскрыта. Однако мало где написано, что все приведенные способы не работают для повторяющегося фона. Насколько понял, проанализировав различные статьи, для IE6 вообще нет адекватного решения. Имеется только паллиатив (половинчатое решение говоря бытовым языком) и сводится к трем вариантам.

1. Фон убирается вообще. Это делается либо через скрипты, либо добавлением атрибута _background: none к элементу с фоном.

2. Вместо PNG используем GIF или другой формат, но уже без 8-битной прозрачности. Замена не равнозначная, но что уж есть.

background: url(shadow.png) repeat-x;

_background: url(shadow.gif) repeat-x;

3. В Фотошопе при сохранении через Save for Web включаем пункт "Transparency Dither". Выглядит это ущербно, но что поделать. Подключение к стилям как в п. 2.

У кого есть комментарии?

Link to comment
Share on other sites

  • Answers 71
  • Created
  • Last Reply

Top Posters For This Question

Recommended Posts

  • 0
Тема добавления рисунка в формате PNG-24 с прозрачными участками в IE6 всячески обсосана и раскрыта. Однако мало где написано, что все приведенные способы не работают для повторяющегося фона. Насколько понял, проанализировав различные статьи, для IE6 вообще нет адекватного решения. Имеется только паллиатив (половинчатое решение говоря бытовым языком) и сводится к трем вариантам.

1. Фон убирается вообще. Это делается либо через скрипты, либо добавлением атрибута _background: none к элементу с фоном.

первый вариант не работает в ИЕ 6.

Link to comment
Share on other sites

  • 0
работыет.

что именно у вас не работает?

покажите код стилей, пожалуйста.

друг, а что тут показывать? выше было написано. сохраните файл PNG-24 с прозрачным фоном и задайте ему класс _background:none.

все сделал, но Ие отображает фон... спасибо

Link to comment
Share on other sites

  • 0
друг, а что тут показывать? выше было написано. сохраните файл PNG-24 с прозрачным фоном и задайте ему класс _background:none.

все сделал, но Ие отображает фон... спасибо

Возможно, дело в специфичности правил.

Была как-то у меня похожая ситуация, к своему стыду разобрался не сразу. Фоновый рисунок у меня назначался по ID, а отменялся - по классу. Естественно, что специфичность правила по ID была выше, и рисунок никуда не исчезал.

Link to comment
Share on other sites

  • 0
Возможно, дело в специфичности правил.

Была как-то у меня похожая ситуация, к своему стыду разобрался не сразу. Фоновый рисунок у меня назначался по ID, а отменялся - по классу. Естественно, что специфичность правила по ID была выше, и рисунок никуда не исчезал.

а можно рабочий пример пожалуйста? спасибо

Link to comment
Share on other sites

  • 0
а можно рабочий пример пожалуйста? спасибо

Я, честно говоря, не знаю, какой пример будет рабочим в вашем случае. Многое зависит от организации таблицы стилей.

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

Link to comment
Share on other sites

  • 0

ребят, всем спасибо конечно, но что-то я не туплю :rolleyes: или мы говорим о другом..

просто хочу узнать технику как отобразить прозрачный PNG и ИЕ6. Причем тут пример с дивами(выше) или почему взависимости от ситуации используется тот или иной метод? вначале темы ясно было сказано что нужно создать класс со свойством _background:none и все дела решаются.

спасибо

Link to comment
Share on other sites

  • 0

Ребят, помогите мне с майспейсом, нужно сделать прозрачный фон, непонимаю в чем моя ошибка. вот мой код

<style>

body

{

background-color:transparent;

background-image:url(http://img189.imageshack.us/img189/8202/46168599.jpg);

background-attachment:scroll;

background-position:center center;

background-repeat:no-repeat;

}

</style>

<style>

body { margin-top:442px;}

.BannerWhats

{

height: 442px;

width: 1110px;

position: absolute;

margin-left: -555px;

left: 50%;

top: 0px;

}

</style>

<div class="BannerWhats"><img src="http://img198.imageshack.us/img198/5231/17592396.jpg" /></div>

как должно быть испправте плиз

Edited by iRussella
Link to comment
Share on other sites

  • 0

Есть более удачный png fix'ер, чем IEPNGFix v2 от twinhelix.com

DD_belatedPNG

http://www.dillerdesign.com/experiment/DD_belatedPNG/

— background-image.

— background-position и background-repeat.

— Не нужен прозрачный gif для <img/>.

— Не используется AlphaImageLoader (используется VML) = нет проблем с z-index.

— Нормально работает element.style в JavaScript.

— Нормально работает :hover.

— ~7Кб сжатого кода.

— Очень прост в использовании.

— Валидный CSS, так как не требуется использование behavior

Пример использования:

<!--[if IE 6]><script type="text/javascript" src="dd_belatedpng_0.0.8a.js"></script>
<script type="text/javascript">
//применение к классам (можно писать и ID и незвание элемента) png фикса.
DD_belatedPNG.fix('.divan div, img, #lustra, .window');
//Такая запись применит pngfix к элементу div в классе .divan, всем изображениям в теге <img>,
//элементам с ID = 'lustra', и элементам с class="window"
</script>
<![endif]-->

Скачать:

DD_belatedPNG_0.0.8a.js

DD_belatedPNG_0.0.8a-min.js

Хотя с таким темпом популярности, скоро на все эти fix's можно будет забить.

LiveInternet browsers statisctic

Edited by dr_lines
Link to comment
Share on other sites

  • 0

Спасибо за фикс, а скажи, получается на body и html фон ПНГ повесить нельзя?

А ещё скажи, что такое Компрессор и чем он отличается от DD_belatedPNG_0.0.8a.js ?

Edited by psywalker
Link to comment
Share on other sites

  • 0

Спасибо за фикс, а скажи, получается на body и html фон ПНГ повесить нельзя?

А ещё скажи, что такое Компрессор и чем он отличается от DD_belatedPNG_0.0.8a.js ?

Да, а еще нельзя на tr и td

Не понял про какой компрессор идет речь.

<TR> and <TD> elements do not play nicely yet. Do not attempt.

Может в будущем они доработают свой фиксер, но врядли.

Edited by dr_lines
Link to comment
Share on other sites

  • 0

dr_lines

1)

Да, а еще нельзя на tr и td

Жаль правда

2)

Не понял про какой компрессор идет речь.

Я имел ввиду, что чем отличается DD_belatedPNG_0.0.8a-min.js от DD_belatedPNG_0.0.8a.js ?

3)

Хотя с таким темпом популярности, скоро на все эти fix's можно будет забить.

LiveInternet browsers statisctic

Я сплю или ИЕ6 действительно начал падать? :lol:

Link to comment
Share on other sites

  • 0
Я имел ввиду, что чем отличается DD_belatedPNG_0.0.8a-min.js от DD_belatedPNG_0.0.8a.js ?

Отличаются лишь способом написания. Который больше весит написан так, чтобы его легче было читать, разбирать. А min - написан в одну строку, избавлен от лиших символов. Так, функционал у них одинаковый.

Да, за 3 месяца такой решительный спад. Так что смерть IE6 уже не загорами. :lol:

Edited by dr_lines
Link to comment
Share on other sites

  • 0
Отличаются лишь способом написания. Который больше весит написан так, чтобы его легче было читать, разбирать. А min - написан в одну строку, избавлен от лиших символов. Так, функционал у них одинаковый.

Да, за 3 месяца такой решительный спад. Так что смерть IE6 уже не загорами. :lol:

1) Слушай, а у меня есть такой же фикс, но он весит 5.71 и точно также работает, могу поделиться :)

Вот он, только в конце - это блоки, которых нужно сделать ПНГ в ИЕ6 :)

http://psywalker.ru/Portfolio/Himik/js/pngfix.js

Кстати вот моя статистика от тудаже, не пойму, в чём прикол? http://www.liveinternet.ru/stat/ru/browser...ml?period=month

Обманывает твоя статистика, на .ru ещё 13.1% целых и падает раз в год :)

Edited by psywalker
Link to comment
Share on other sites

  • 0
Invalid Explorer

по октябрю - 13.0%

за три месяца - 13.8%

Падение в месяц около 1%

Данные liveinternet.ru

Скоро сдохнет!

Я уже прекратил поддержку IE 6 в админской части сайта.

Падение в месяц около 1% - это значит, что сдохнет через 2 года, не раньше!

Link to comment
Share on other sites

  • 0

Не стоит давать такие отчаянные прогнозы. Все зависит от влияния рекламы других браузеров и влияния антирекламы IE6.

Поэтому этот 1% - цифра далеко не фиксированная.

Потом, если все больше сайтов перестанут поддерживать IE6, тем больше пользователей будут вынуждены перейти на другой браузер.

Edited by dr_lines
Link to comment
Share on other sites

  • 0
Нестоит давать такие отчаянные прогнозы. Все зависит от влияния рекламы других браузеров и влияния антирекламы IE6.

Поэтому этот 1% цифра далеко нефиксированная.

Пока госконторы не переедут на другие оси - будет жив. Мне, вон рассказали, что в налоговую надо с дискеткой до сих пор приходить, всякие флешки и диски не принимаются =)

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

Link to comment
Share on other sites

  • 0
Пока госконторы не переедут на другие оси - будет жив. Мне, вон рассказали, что в налоговую надо с дискеткой до сих пор приходить, всякие флешки и диски не принимаются =)

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

Горькая правда :angry:

Link to comment
Share on other sites

  • 0
Пока госконторы не переедут на другие оси - будет жив. Мне, вон рассказали, что в налоговую надо с дискеткой до сих пор приходить, всякие флешки и диски не принимаются =)

Вот мне интересно - а когда дисководы поломаются, новые-то уже с трудом найти можно… Или у них запас лет на 50? -)

Сам работал на госпредприятии, когда для обмена информацией внутри предприятия стали переходить с дискет на флешки. Всем стало лучше -) Но это почти случайно получилось.

Link to comment
Share on other sites

  • 0
Совсем скоро такие ухищрения будут нужны всё реже, потому как http://absolvo.ru/2008-07-20/ie-png-fix-20...kground-repeat/

А как эту штуку использовать? Там мануал на английском :)

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


×
×
  • 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