Jquery - fadeIn () и fadeOut () в изображении PNG.Граница Сплошная (черная) в IE8 ...?

Question

Я запускаю fadeIn () и fadeOut () в блоке div, где есть изображение PNG, с полупрозрачными средствами (с тенью).

см. В http://jsfiddle.net/k3KUj/8/embedded/

В IE 8 появляются жесткие края при запуске fadeIn () и fadeOut (), но вскоре они исчезают. В Firefox все нормально.

Логично применить цвет фона в PNG (например, со ссылкой выше, цвет фона должен быть светло-серым), это работает.

Но не хочу ставить цвет фона в PNG. Я пытаюсь получить черные рамки не отображаются в IE 8, даже если у вас есть прозрачность изображения PNG.

Глядя на ответ на форуме , пробовал:

-ms-фильтр: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # 00FFFFFF, endColorstr = # 00FFFFFF)"; / * IE8 /
фильтр: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 00FFFFFF, endColorstr = # 00FFFFFF); / IE6 & 7 * /
зум: 1;

и см. В jQuery IE Fadein и Fadeout Opacity

$ ('# bloc'). Css ('filter', 'alpha (opacity = 40)');

и посмотрите в проблему fadeIn / fadeOut jquery с IE7 / 8 & png

$ ("# bloc"). Css ('filter', 'none');

Но не работает. Любая новая идея, без применения какого-либо цвета на прозрачном фоне изображения?

Спасибо, Виниций.

Answer 1

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

    .container img {
         background-color: white;
    }

Определите свойство background-image css вашего изображения для атрибута src :

    $('.holder-thumbs li a img').each(function() {
         $(this).css('background-image', $(this).attr('src'));
    });

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

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