Как решить / взломать ошибку выцветания полупрозрачного PNG в IE8?

Question

Как вы знаете, в IE6 есть ошибка, из-за которой не удается отобразить полупрозрачный PNG-файл без использования нестандартного стиля, такого как filter.В IE7 эта проблема исправлена.Но в нем все еще есть какая-то ошибка в файле PNG.Он не может корректно отобразить выцветающий полупрозрачный PNG-файл.Вы можете четко видеть это, когда используете функцию show / hide в jQuery с полупрозрачным файлом PNG.Фон изображения отображается непрозрачным черным цветом.

Есть ли у вас какие-нибудь идеи по решению этого вопроса с помощью jQuery.

Обновить

Давайте посмотрим на мое тестирование

альтернативный текст http://rabu4g.bay.livefilestore.com/y1pGVXLwPdkxudYLmIdnMpWTP_9up-8isxbPKX945Ui4ITnYWnR0msaa2NmUF-qJ-Q4a2AAGaiGHwaFSgR1HeplDIO0bWbyRODI/bug.png

Как вы видите, IE8 всегда неправильно отображает изображение в формате PNG-24.Более того, IE8 по-прежнему корректно отображает изображение в формате PNG-8, когда я удаляю (функция jQuery.fadeOut) только его.Но это неправильно отображает изображение в формате PNG-8, когда я одновременно изменяю размер (jQuery.функция скрытия).

PS.Вы можете загрузить мой исходный код для тестирования с здесь.

Спасибо,

Answer 1

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

Самый простой способ - вы просто определяете фон текущего изображения, как показано в приведенном ниже коде.Или вы можете видеть полный исходный код и демо-версия на моем JsFiddle

#img2
{
    background:#fff;   
}

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

Answer 2

Эй, я не знаю, ищешь ли ты все еще ответ.Пару дней назад у меня была такая же проблема с анимацией div с изображением PNG внутри.Я перепробовал много решений, и единственное, которое сработало нормально, - это то, которое я закодировал сам.

Проблема, по-видимому, в том, что IE не поддерживает прозрачность и надлежащую поддержку PNG, поэтому после применения эффекта непрозрачности отображение PNG прерывается (я полагаю, что анимационные фреймворки полагаются на собственный MSIE-фильтр "AlphaImageLoader" для эффекта непрозрачности в IE).Любопытная вещь (для меня, которая все еще не очень хорошо понятна) заключается в том, что эту проблему можно решить, используя тот же фильтр для загрузки изображения перед анимацией.

Я написал простой javascript, который применяет фильтр к каждому изображению с расширением .PNG.С его помощью мои анимации отлично работают в IE.

Я копирую приведенный ниже код.Он не зависит от фреймворка (это чистый JavaScript), но вы должны поместить его в событие DOM ready вашего фреймворка (или использовать domready.js, как я сделал).

var i;
for (i in document.images) {
    if (document.images[i].src) {
        var imgSrc = document.images[i].src;
        if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
            document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
        }
    }
}

Пожалуйста, дайте мне знать, все ли у вас получилось и прошла ли анимация гладко.С наилучшими пожеланиями!

Answer 3

HTML

   <img src="image.png" class="iefix" width="16" height="16" />

в CSS

.iefix
{
 /* IE hack */
  background:none\9; /* Targets IE only */
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader();
}

легко, быстро и приятно :)

Answer 4

Основной причиной проблемы, по-видимому, является плохая поддержка Micrsoft IE альфа-прозрачности PNG (в любой версии IE).IE6 на сегодняшний день является худшим нарушителем, поскольку выдает альфа-прозрачные пиксели в виде бледно-голубого цвета.IE7 и IE8 обрабатывают альфа-прозрачность PNG, но не могут обработать изменение непрозрачности альфа-прозрачного пикселя в PNG – они отображаются как черные, а не прозрачные.

Мои собственные исправления для этого зависят от ситуации.Вот несколько подходов:

1. Просто используйте GIF.GIF-файлы не будут выглядеть такими гладкими (из-за ограниченной глубины цвета), но пиксели будут полностью прозрачными.
2. Используйте исправление IE PNG, доступное здесь: http://git.twinhelix.com/cgit/iepngfix/ -- открой index.html и прочти комментарии.
3. Анимируйте движение, но не анимируйте непрозрачность изображений PNG.
4. Условно выполните любое или все из вышеперечисленных действий, используя либо тесты JavaScript, либо условные комментарии, либо расширение CSS "поведение" только для MSIE.Вот как все это может сработать:

Условные комментарии:

<!-- in index.html, in the <head>: -->
<!--[if IE 6]>
<link rel="stylesheet" src="css/ie6only.css" />
<![endif]-->

В css:

/* ie6only.css */
img { behavior: url("js/iepngfix.htc"); }

С помощью обнаружения JavaScript:

<script defer type="text/javascript">
if(navigator.appName == "Microsoft Internet Explorer")
{ /* Do IE-specific stuff here */ }
else
{ /* Non-IE-compatible stuff here */ }
</script>

Поведение iepngfix.htc выполняется путем замены PNG пустым изображением (blank.gif ), а затем с помощью подпрограмм Microsoft DXImageTransform загружается PNG в качестве фильтра на пустое изображение.Существуют и другие исправления PNG, которые работают путем обертывания объектов в divs или spans , но они часто нарушают ваш макет, поэтому я их избегаю.

Надеюсь, это поможет.

Answer 5

Мне удалось исправить эту проблему для IE 6/7/8.

Примерно выглядит так:

<div class="wrapper">
  <div class="image"></div>
</div>

...

/* I had to explicitly specify the width/height by pixel */
.wrapper
{
  width:100px;
  height:100px;
}

.image
{
  width:100%;
  height:100%;
  background:transparent url('image.png') no-repeat;

  /* IE hack */
  background:none\9; /* Targets IE only */
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png", sizingMethod="crop");
}

...

$(".wrapper").fadeOut('slow');

Обратите внимание, что атрибут "filter" неявно предназначен только для IE.

Answer 6

Я использовал эту функцию для предварительной загрузки изображений в карусель галереи.Он основан на приведенном выше ответе Алехандро Гарсии Иглесиаса.Он избавился от "черного ореола" в IE 6 и 8.

function preloadImages(id) {
    var c = new Array();
    $(id+' img').each( function(j) {
        c[j] = new Image();
        c[j].src = this.src;

        if ( $.browser.msie ) {
            this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='"+ this.src +"')"; 
        }
    });

}

Звони вот так:

preloadImages('#Stage');

Answer 7

Почему бы тебе не попробовать с PNG8.PNG8 широко известен как полностью прозрачный, как и формат файла GIF.Однако экспортируемый с Фейерверками он может быть полупрозрачным, как PNG24.Преимущество заключается в том, что IE6 отображает PNG8 с полупрозрачными пикселями, как это GIF -файл, или с полной прозрачностью, но IE7 и 8 отображают его корректно как PNG24, и если вы уменьшите его с помощью jQuery или любой другой библиотеки js, фон не будет отображаться серым цветом, потому что он не использует свойство famous -filter .

Answer 8

я использую модифицированное исправление PNG для IE6, оно работает просто отлично:

(function ($) {
if (!$) return;
$.fn.extend({
    fixPNG: function(sizingMethod, forceBG) {
            if (!($.browser.msie)) return this;
            var emptyimg = "x.gif"; //Path to empty 1x1px GIF goes here
            sizingMethod = sizingMethod || "scale"; //sizingMethod, defaults to scale (matches image dimensions)
            this.each(function() {
                    var isImg = (forceBG) ? false : jQuery.nodeName(this, "img"),
                            imgname = (isImg) ? this.src : this.currentStyle.backgroundImage,
                            src = (isImg) ? imgname : imgname.substring(5,imgname.length-2);
                    this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + sizingMethod + "')";
                    if (isImg) this.src = emptyimg;
                    else this.style.backgroundImage = "url(" + emptyimg + ")";
            });
            return this;
    }
});
})(jQuery);

не забудьте загрузить x.gif .(прозрачный gif размером 1x1)

Answer 9

Преимущество заключается в том, что IE6 отображает PNG8 с полупрозрачными пикселями, как это GIF -файл, или с полной прозрачностью, но IE7 и 8 отображают его корректно как PNG24, и если вы уменьшите его с помощью jQuery или любой другой библиотеки js, фон не будет отображаться серым цветом, потому что он не использует свойство famous -filter .

В IE есть только один способ выполнить преобразование непрозрачности.Фильтр:альфа (непрозрачность:).Как еще jQuery должен это делать?

Answer 10

Пока у меня ничего толком не получалось из того, что я читал, объединяя настройки непрозрачности с помощью CSS и прозрачных PNGS.Это решение в конечном итоге сработало для меня на анимированной странице непрозрачности в IE8.Другие решения, перечисленные на этой странице, не сработали.

#img {
    background:transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50) progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png')"; /* IE8 */
    zoom:1;
    width:600px;
    height:400px;
}

<div id='img'></div>

Обратите внимание, что сначала в фильтре есть альфа-фильтр, затем AlphaImageLoader.

Answer 11

Это можно сделать аналогично тому, что здесь сделал Stu: http://www.cssplay.co.uk/menus/flyout_horizontal.html

Answer 12

У меня такая же досадная проблема с IE8 и IE7..кто-нибудь проверял, справляются ли Cmc solutions с этой задачей?

Мой URL-адрес таков http://www.onlinebrand.dk (Верхнее меню исчезает, как в Google :) Но IE это не волнует.)

Редактировать:Просто протестировал это сам, и даже если я установлю ширину и высоту, ну, повторяющегося изображения.Это не работает

Я только что нашел другой обходной путь, где Fadein является оболочкой вместо div с изображением .png bg.И это вроде как сработало, теперь я получаю некоторую прозрачность в IE, но также и некоторое отступление / поля..Совершенно странно..

Билл Гейтс, что с этим такое?Почему мы не можем поладить?

Answer 13

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

   .изображение контейнера { цвет фона:Белый;}

2. Определите фоновое изображение css-свойство вашего изображения к его Src атрибут:

   $('img.png-trans').each(функция() { $(this).css('фоновое изображение', $(this).attr('src'));});

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

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

Answer 14

Использование Исправление Unit PNG для полупрозрачного png-24.