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

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

У вас есть идея решить этот вопрос, используя jQuery.

Обновить

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

alt text http://rabu4g.bay.livefilestore.com/y1pGVXLwPdkxudYLmIdnMpWTP_9up-8isxbPKX945Ui4ITnYWnR0msaa2NmUF-qJ-Q4a2AAGaiGHwaFSgR1HeplDIO0bWbyRODI/bug.png

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

PS. Здесь вы можете скачать исходный код для тестирования.

Благодаря,

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

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

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

Я копирую код ниже. Я независим от структуры (это чистый JavaScript), но вы должны поместить его в готовое событие DOM для вашей инфраструктуры (или использовать 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 + "')"; } } } 

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

HTML

   

в CSS

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

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

Основной причиной проблемы является низкая поддержка IE в Micrsoft для альфа-прозрачности 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, условные комментарии, либо расширение «поведение» только для MSIE для CSS. Вот как это могло бы работать:

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

   

В css:

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

Через обнаружение JavaScript:

  

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

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

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

Грубо выглядит так:

 
... /* I had to explicitly specify the width/height by pixel */ .wrapper { width:100px; height:100px; } .image { width:100%; height:100%; background:transparent url('https://stackoverflow.com/questions/1204457/how-to-solve-hack-fading-semi-transparent-png-bug-in-ie8/image.png') no-repeat; /* IE hack */ background:none\9; /* Targets IE only */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://sofru.miximages.com/jquery/image.png", sizingMethod="crop"); } ... $(".wrapper").fadeOut('slow');

Обратите внимание, что атрибут «фильтр» неявно нацелен только на IE.

Я использовал эту функцию для предварительной загрузки изображений в карусель галереи. Он основан на ответе Алехандро Гарсиа Иглесиаса выше. Он избавился от «черного ореола» в 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'); 

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

введите описание изображения здесь

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

 #img2 { background:#fff; } 

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

введите описание изображения здесь

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

я использую модифицированное исправление 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. (прозрачный 1×1 gif)

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

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

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

 #img { background:transparent; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50) progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://stackoverflow.com/questions/1204457/how-to-solve-hack-fading-semi-transparent-png-bug-in-ie8/image.png')"; /* IE8 */ zoom:1; width:600px; height:400px; } 

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

Это можно сделать так, как это сделал Стю: http://www.cssplay.co.uk/menus/flyout_horizontal.html

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

Мой url – http://www.onlinebrand.dk (Главное меню исчезает, как Google 🙂 Но IE не заботится.)

EDIT: просто проверил его сам, и даже если бы я установил ширину и высоту, ну, повторяя img. Он не работает

Я просто нашел другую работу, где Fadein – обертка вместо div с изображением .png bg. И это вроде как сработало, Im теперь получает некоторую прозрачность в IE, но также, некоторые дополнения / margin..Totally wierd ..

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

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

    .container img {background-color: white; }

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

    $ (‘img.png-trans’). each (function () {$ (this) .css (‘background-image’, $ (this) .attr (‘src’));});

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

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

Используйте блок PNG Fix для полупрозрачного png-24.

  • Как использовать значки .png в Windows 7?
  • Как сделать цвет прозрачным в BufferedImage и сохранить как PNG
  • Конвертировать видео в apng / png?
  • Сохранение графического изображения Java 2d как .png-файла
  • Base64 PNG-данные для canvasа HTML5
  • Преобразование изображения в несжатый PNG из командной строки
  • Имеет ли PNG данные EXIF, такие как JPG?
  • Графики Matplotlib теряют прозрачность при сохранении как .ps / .eps
  • Коррумпированные файлы PNG после распаковки
  • Преобразование PDF в PNG
  • Преобразование многих изображений в один PDF на Mac
  • Interesting Posts

    Угловые коды / соглашения об именах

    Java-точка пересечения многоугольника и линии

    Как поисковые системы работают с приложениями AngularJS?

    Контакты не отображаются в контактной книге, но они отображаются в поле «Кому». Зачем?

    Запланированное убийство и перезапуск процесса

    Как использовать «Статические методы фабрики» вместо конструкторов?

    Обновление Windows происходит после установки IE11

    AngularJS – сброс значения $ scope.value не изменяет значение в шаблоне (случайное поведение)

    Как вставить символ utf-8 mb4 (emoji в ios5) в mysql?

    В чем разница между ярлыками «Win-D» и «Win-M»?

    java.lang.IllegalAccessError: попытался получить доступ к методу

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

    Как создать универсальную модель объекта для использования в QML?

    Hp probook white screen с ошибкой отменить изображение и загрузить в следующий порядок загрузки

    Время ожидания NSURLConnection?

    Давайте будем гением компьютера.