JQuery цикл IE7 прозрачной PNG проблема

Question

Мне не удается заставить цикл jquery работать, когда у меня есть прозрачные файлы png в IE7

Это нормально в Firefox и Chrome, но в IE (версия 7) я получаю черный цвет, где png прозрачность во время затухания.

Можно ли сделать так, чтобы это работало правильно?

Answer 1

Я загружаю некоторые png динамически в DOM ... это работает для меня: http://www.twinhelix.com/css/iepngfix/

Answer 2

Internet Explorer 7 имеет некоторые проблемы с исчезающими прозрачными PNG. Если Вы попали на эту страницу, потому что вы видите черную границу, где прозрачные края в вашем PNG есть, тогда вот несколько советов по исправлению Проблема:

1. Не выгружать элемент напрямую, а затухать родительский контейнер держа PNG. Это может означать, что вы нужно добавить элемент обертки к вашему Код.
2. Придайте родительскому элементу цвет фона.
3. Наконец, если у вас все еще есть проблемы, попробуйте указать родительский элемент старый zoom: 1 трюк. Дай родительский элемент объявление стиля zoom: 1 (с помощью CSS или встроенного стиль.) Это заставит IE дать элемент hasLayout - который имеет тенденцию к исправлению все виды странных проблем с отображением в IE.

Источник: Затухание 24-битного прозрачного PNG в IE7 +

К сожалению, это означает, что невозможно, чтобы прозрачные PNG-изображения постепенно исчезали на прозрачном фоне, поскольку необходимо применить цвет фона к родительскому элементу, чтобы переход прошел плавно, т.е. без черных пикселей. background: transparent не сработает (поскольку transparent на самом деле не цвет). (

Answer 3

1. Определите сплошной цвет фона для вашего изображения:

    .container img {
         background-color: white;
    }

1. Определите свойство background-image css вашего изображения для его атрибута src :

    $('.container img').each(function() {
         $(this).css('background-image', $(this).attr('src'));
    });

Преимущество: вам не нужно менять разметку

Недостаток: иногда применение сплошного фона не является приемлемым решением. Это обычно для меня.

Answer 4

Это все довольно беспокойные вещи, которые вас просят сделать. Все очень кодирующее кодирование.

Вот мое предложение. IE не позволит фону png над цветным фоном жить в мире, вот так ...

    <div style="background:url('something.png') no-repeat 0 0 scroll; position:absolute; z-index:2;">&nbsp;</div>
<div style="background-color:#fa0237; position:absolute; z-index:1;">&nbsp;</div>

Обратите внимание, что первый div - это z-index 2 (поверх второго div).

Это можно упростить, поместив свой bgColor в фоновый CSS в 1-м Div и покончив со вторым Div. Это решает проблему черных областей. У меня была эта проблема сама.

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

Answer 5

Это сводило меня с ума на пару дней, и я наконец наткнулся на исправление PNG отряда. http://labs.unitinteractive.com/unitpngfix.php - работает с Cycle и остановил меня от перехода на решение JPEG!

Нужно немного переделать, чтобы нацелить определенные PNG в цикле div, но она работает!

Answer 6

Надеясь помочь кому-нибудь еще, кто сталкивается с этой проблемой:

У меня были прозрачные фоны .png (плиточные) на нескольких страницах на моей странице, и когда я активировал плагин цикла jquery, эти прозрачные области стали шуметь. Они потеряли часть своей прозрачности.

Мое решение состояло в том, чтобы просто сделать плитки намного больше, чтобы на самом деле плитки вообще не было. Есть небольшой компромисс для размера файла, но это решило проблему.

Answer 7

Хотя это и не ограничивается плагином цикла, это может помочь другим. Я наткнулся на этот поток, пытаясь найти решение для .animate () прозрачных / полупрозрачных файлов png. У меня была проблема черной границы, встречающейся как в IE7, так и в IE8. Изображения выглядят нормально, пока я не попытался использовать JQuery для анимации прозрачности ...

$('#my-png-img').stop().animate({opacity:0.0},3000); 

Я прошел через несколько решений, и, к сожалению, ни одно из них не было идеальным. Хотя этот поток немного устарел, он может помочь кому-то еще, все еще ищущему собрать воедино решение. В итоге я использовал решение Twin Helix (http://www.twinhelix.com/css/iepngfix/) с небольшим изменением. Я не большой поклонник файлов .htc, но это не относится к делу. Я редактировал файл iepngfix.htc (~ строка 75 ) в ловушку для IE7 и IE8. Я изменил ...

!/MSIE (5\.5|6)/.test(navigator.userAgent) ||

до

!/MSIE (5\.5|6|7|8)/.test(navigator.userAgent) ||

Оттуда я следовал общим инструкциям (см. Демонстрацию), включая добавление этого бита в мой CSS

/* IE PNG Fix */
img, div, a, input { 
    behavior: url(/_css/iepngfix.htc) 

} 

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

<div id="img-container"><img src="/images/my_semi_trans_png24.png" /></div>

Затем я применил эффект .animate () к содержащемуся div. Немного сдерживающий, однако, это был единственный способ, которым я смог заставить замирание работать последовательно. В одном случае я даже обнаружил, что проблема прозрачности влияет на анимацию прозрачности прозрачного файла .gif. Да, и неважно, использовал ли я .fadeIn () /. FadeOut вместо .animate ().

Answer 8

Если вы можете позволить себе немного жертвовать качеством изображения, вы можете сохранить изображения как PNG-8 вместо PNG-24, а затем применить исправление, упомянутое Prosini, т.е.

cleartype: true, cleartypeNoBg: true

и это должно работать. С PNG-24 я все еще получал немного черной границы во время переходов.

Answer 9

Я переписал методы fadeIn и fadeOut. Кажется, я не получаю черный цвет на изображении PNG. Нет родительского div не требуется. Тем не менее вы используете в качестве jQuery.

http://www.pagecolumn.com/javascript/fade.htm

Answer 10

Чтобы решить эту проблему, просто добавьте:

"фильтр": ""

на ваши .css () или .animate (), и это исправит ряд проблем, связанных с IE.