ошибка позиционирования и прозрачности изображения в IE 8 - PullRequest
Новая
       11

ошибка позиционирования и прозрачности изображения в IE 8

0 голосов
/ 04 декабря 2010

Я пытаюсь поместить несколько изображений поверх другого изображения, а затем я постепенно увеличиваю и уменьшаю эти изображения, вот мой css: 

#spark1 {
    bottom: 211px;
    left: 252px;
    position: relative;
    width: 75px;
}
#spark2 {
    bottom: 100px;
    left: 286px;
    position: relative;
    width: 50px;
}

мой HTML: 

<div id="spark1">
    <img src="clientside/images/big_sparkle.png" />
</div>
<div id="spark2">
    <img src="clientside/images/little_sparkle.png" />
</div>

мой эффект затухания (в случае, если это как-то связано с проблемой, с которой я сталкиваюсь) 

$(function(){
    setInterval(function() {
        $('#spark1').fadeOut(800).fadeIn(800);
        $('#spark2').fadeOut(1000).fadeIn(1000);
    }, 2000);
});

Все хорошо выглядит в Firefox и Chrome, однако в IE 8 (не тестировалось ни в каких предыдущих версияхIE), изображения блеска имеют неправильное позиционирование и имеют черный фон вместо прозрачного, как я могу справиться с этим ??спасибо

С уважением

Обновление:

Я попытался несколько обходных путей CSS, но ничего не работает (вероятно, потому что я применяю это неправильно): p), но в конце концов я нашел небольшое удобное решение, я поставил эту строку после моего эффекта затухания jquery: 

$("#spark1").css('filter', 'none');

и этот css на мой img: 

#spark1 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;
    }

спасибоза pekka за указание на эти статьи, я думаю, что сейчас я буду придерживаться этого решения

1 Ответ

1 голос
/ 05 декабря 2010

Если ваши PNG имеют альфа-прозрачность, на самом деле существует ошибка, которая сохраняется даже в IE8: изображения с альфа-прозрачностью нельзя сделать прозрачными (= если значение opacity отличается от 1).

См. этот вопрос для справочной информации и обходных путей.

...