Проблема з прозорістю 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.

Виправлено!

Я боровся з тим самим випуском, і щойно мав прорив! Ми встановили, що якщо ви надаєте зображенню колір фону або зображення, 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. Поступово зникайте і зникайте, або анімуйте їх через екран - це все добре.

Я помістив це в плагін 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 і не дати йому використовувати як фільтр, так і фон, який ви встановили, і використовувати лише фільтр. Інші браузери підтримують кілька фонових зображень, і вони розумітимуть декларацію фону та не розумітимуть фільтр, отже, використовуватимуть лише фон.

Можливо, вам також доведеться пограти з методом sizingMet у фільтрі, щоб він працював так, як ви хочете.

У мене сталося те ж саме з 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 {
фон: #ffaabb; / * це повинен бути колір тла, який насправді відповідає вашому дизайну * /
фільтр: кольоровість (#ffaabb); / * і це повинно відповідати будь-якому значенню, яке ви вводите у фоновому кольорі * /
}

Це може зажадати більше роботи над ie9 або пізнішої версії.

Просто хочу додати (оскільки я погуглив цю проблему, і це питання з’явилося першим) IE6 та інші версії роблять прозорість PNG дуже потворною. Якщо у вас є зображення у форматі PNG, яке є прозорим альфа-форматом (32 біти), і ви хочете показати його на якомусь складному тлі, ви ніколи не можете зробити це просто в IE. Але ви можете правильно відображати його на одному кольоровому фоні, якщо встановлено, що атрибут CSS background-colorдля зображень PNG (або divs) однаковий з батьками 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-бітовим альфа-файлом, яке було встановлено як прив'язне посилання.
• Якір затягувався при наведенні за допомогою Jquery.

напр.

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

Я виявив, що застосування націнки, яку надав Ден Телло, не спрацювало.

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

напр.

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