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

У меня возникают проблемы с прозрачным изображением 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.

Пожалуйста, помогите!

ОТВЕТЫ

Ответ 1

ИСПРАВЛЕНО!

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

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

Ответ 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.

Ответ 3

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

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

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

DEMO

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

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

Ответ 4

Я имел то же самое с 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: ...;

Ответ 5

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

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

Спасибо Dan!!!

Ответ 6

попробуйте код ниже.

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

Ответ 7

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

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

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

Ответ 8

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

Try

.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 или новее.

Ответ 9

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

Ответ 10

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

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

например.

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

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

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

например.

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