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

ИСПРАВЛЕНО!

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

Затем я вспомнил про преобразователь rgba to ie, с которым я столкнулся. (Спасибо Майклу Бестеру). Поэтому мне стало интересно, что произойдет, если я предоставлю своей проблеме png, т.е. отфильтрованный фон, эмулирующий 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;

}

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

Я поместил это в плагин 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.

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

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

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

ДЕМО

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

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

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

Исправление заключалось в установке цвета фона элемента ‹A›.

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

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: ...;

Проблема прозрачности 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 игнорировать мое предыдущее объявление фактического фонового изображения для других браузеров.

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

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

 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 */   

Исправление Дэна Телло сработало для меня.

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

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

Я использую исправление 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 или новее.

Просто хочу добавить (так как я искал эту проблему в Google, и этот вопрос возник первым) IE6 и другие версии делают прозрачность PNG очень уродливой. Если у вас есть PNG-изображение, которое является альфа-прозрачным (32-битным) и вы хотите показать его на каком-то сложном фоне, вы никогда не сможете сделать это просто в IE. Но вы можете правильно отобразить его на одноцветном фоне, если вы установите атрибут CSS для изображений PNG (или div) 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) можно найти ЗДЕСЬ.

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

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

eg.

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

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

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

eg.

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