Как решить/взломать полупрозрачную ошибку 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. Вы можете загрузить исходный код моего тестирования из здесь.

Спасибо,

Ответ 1

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

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

#img2
{
    background:#fff;   
}

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

Ответ 2

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

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

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

Ответ 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();
}

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

Ответ 4

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

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

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

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

<!-- 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, которые работают, обертывая вещи в div или span, но они часто нарушают ваш макет, поэтому я избегаю их.

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

Ответ 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');

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

Ответ 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');

Ответ 7

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

Ответ 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. (прозрачный 1x1 gif)

Ответ 9

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

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

Ответ 10

На самом деле для меня ничего не работало, пока я читал, комбинируя оба параметра непрозрачности через CSS и прозрачные PNG. Это решение оказалось для меня на анимированной странице непрозрачности на 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.

Ответ 11

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

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

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

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

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

Ответ 12

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

Ответ 13

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

.container img { background-color: white; }
Определите свойство css background-image вашего изображения в атрибуте src:

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

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

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

Ответ 14

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