Прозрачность PNG в IE8

Question

У меня проблемы с прозрачным изображением в формате PNG, показывающим артефакты с черными размытыми пикселями по краю непрозрачной части изображения. Он делает это только в Internet Explorer и только из файла Javascript, в котором он используется.

Вот о чем я говорю ... http://70.86.157.71/test/test3.htm (ссылка сейчас не работает) ... обратите внимание на девушку в правом нижнем углу. У нее есть артефакты вокруг нее в IE8 (я не проверял это в предыдущих версиях IE, но я предполагаю, что это, вероятно, делает то же самое). Отлично работает в Firefox и Chrome. Изображение загружается из файла Javascript для создания эффекта наведения мыши.

Если вы загрузите изображение само по себе, оно будет работать нормально. Вот изображение ... http://70.86.157.71/test/consultant2.png

Как это исправить?

Изображение было получено в Photoshop CS3.

Я читал кое-что об удалении Gama, но это, очевидно, было в предыдущих версиях Photoshop, и когда я загружаю его в TweakPNG, у него нет Gama.

Answer 1

FIXED!

Я боролся с той же проблемой, и у меня был прорыв! Мы установили, что если вы дадите изображению цвет фона или изображение, png будет правильно отображаться поверх него. Черная рамка исчезла, но теперь у вас непрозрачный фон, и это в значительной степени побеждает цель.

Тогда я вспомнил конвертер фильтра rgba to ie, с которым я столкнулся. (Благодарю Майкла Бестера) Поэтому мне было интересно, что произойдет, если я дам своей проблеме pngs то есть отфильтрованный фон, эмулирующий rgba (255,255,255,0), полностью ожидая, что это не сработает, но давайте все равно попробуем ...

.item img {
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
    zoom: 1;

}

Presto! Прощай, черный, и здравствуй, работая с альфа-каналами в ie7 и 8. Выцветай и вставляй свои png-картинки или анимируй их по экрану - все это хорошо.

Answer 2

Я вставил это в плагин jQuery, чтобы сделать его более модульным (вы предоставляете прозрачный GIF):

$.fn.pngFix = function() {
  if (!$.browser.msie || $.browser.version >= 9) { return $(this); }

  return $(this).each(function() {
    var img = $(this),
        src = img.attr('src');

    img.attr('src', '/images/general/transparent.gif')
        .css('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + src + "')");
  });
};

Использование:

$('.my-selector').pngFix();

Примечание. Работает также, если ваши изображения являются фоновыми. Просто примените функцию к div.

Answer 3

Я знаю, что эта ветка уже давно мертва, но вот еще один ответ на старую проблему ie8 png.

Вы можете сделать это в CSS, используя такую ​​же систему фильтрации, как IE:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='pathToYourPNG');

DEMO

вам нужно будет использовать blank.gif для «первого» изображения в объявлении фона. Это просто для того, чтобы запутать ie8 и предотвратить использование как фильтра, так и заданного фона, и использовать только фильтр. Другие браузеры поддерживают несколько фоновых изображений и понимают объявление фона и не понимают фильтр, поэтому используют только фон.

Вам также может понадобиться поиграть с sizingMethod в фильтре, чтобы заставить его работать так, как вы хотите.

Answer 4

У меня было то же самое, что произошло с PNG с прозрачностью, которая была установлена ​​как фоновое изображение элемента с примененной непрозрачностью.

Исправлено: цвет фона элемента .

Итак, следующее:

filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;

Превращается в:

/* "Overwritten" by the background-image. However this fixes the IE7 and IE8 PNG-transparency-plus-opacity bug. */
background-color: #FFFFFF; 

filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;

Answer 5

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

 background: transparent\0/;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png');   /* IE7 */      
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png')"; /* IE8 */   

Answer 6

Проблема прозрачности PNG в IE8

Решение Дэна сработало для меня. Я пытался исчезнуть div с фоновым изображением. Предостережения: вы не можете сразу исчезнуть div, вместо этого вычеркнуть изображение-обертку. Также добавьте следующие фильтры, чтобы применить фоновое изображение:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png')"; /* IE8 */   
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png');   /* IE6 & 7 */      

Обратите внимание, что пути в атрибутах src фильтров являются абсолютными и не относятся к листу css.

Я также добавил:

background: transparent\9;

Это заставляет IE игнорировать мое предыдущее объявление фактического фонового изображения для других браузеров.

Спасибо, Дэн !!!

Answer 7

Я использую исправление CSS, а не JS, чтобы обойти мой слой с закругленными углами с прозрачным PNG внутри

Попробуйте

.ie .whateverDivWrappingTheImage img {
background: #ffaabb; /* this should be the background color matching your design actually */
filter: chroma(#ffaabb); /* and this should match whatever value you put in background-color */
}

Это может потребовать дополнительной работы на ie9 или более поздней версии.

Answer 8

Дэн Телло исправил хорошо для меня.

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

Исправлено исправление ширины и высоты CSS или их полное удаление.

Answer 9

Мой сценарий:

• У меня было фоновое изображение с 24-битный альфа-PNG, который был установлен в якорная ссылка.
• Якорь был исчез при наведении курсора с помощью Jquery.

например.

a.button { background-image: url(this.png; }

Я обнаружил, что применение надбавки, предоставленной Дэном Телло, не сработало.

Однако, поместив span внутри элемента привязки и установив background-image для этого элемента, я смог добиться хорошего результата, используя разметку Дэна Телло.

например.

a.button span { background-image: url(this.png; }

Answer 10

Просто хочу добавить (так как я погуглил эту проблему, и этот вопрос появился первым), IE6 и другие версии делают прозрачность PNG очень уродливой. Если у вас есть изображение PNG, которое является альфа-прозрачным (32 бита) и вы хотите показать его на каком-то сложном фоне, вы никогда не сможете сделать это просто в IE. Но вы можете правильно отображать его на одном цветном фоне, если для CSS-атрибута PNG-изображений (или divs) background-color установлено то же самое, что и для родителей background-color.

Таким образом, будет отображаться черный цвет, где изображение должно быть альфа-прозрачным, и прозрачным, где альфа-байт равен 0:

<div style="background-color: white;">    
    <div style="background-image: url(image.png);"/>    
</div>

И это будет правильно отображаться (обратите внимание на атрибут background-color во внутреннем div) :

<div style="background-color: white;">    
    <div style="background-color: white; background-image: url(image.png);"/>    
</div>

Сложная альтернатива этому, которая позволяет альфа-изображению на сложном фоне, использовать AlphaImageLoader для загрузки и рендеринга изображения с определенной непрозрачностью. Это работает, пока вы не захотите изменить эту непрозрачность ... Проблему подробно и ее решение (javascript) можно найти ЗДЕСЬ .