2010-08-24 4 views
3

У меня два изображения ниже.Internet explorer: полупрозрачные изображения

Это одно и то же изображение, с одним из которых имеет небольшой эффект свечения на текст.

Они настройки, как показано ниже:

<div id="header"><a></a></div> ивовый прут исходное изображение является фоном для DIV, и «свечение» изображение является фоном для тега привязки, с display:block; width: 100%; height: 100%;opacity: 0;

Я используя нижеследующий код jquery

$('#header a').hover(
    function() {$(this).animate({"opacity":"1"}, 1000);}, 
    function() {$(this).animate({"opacity":"0"}, 1000);}); 

это прекрасно работает в firefox, chrome ect. Но в интернет-браузере изображение получает сплошной черный фон, где есть прозрачность.

Как я могу это исправить?

NB: Я беспокоюсь только о IE7/8 не 6.

http://webspirited.com/header-reachsniper.png http://webspirited.com/header-reachsniper-hover.png


Update
Я решил, что это просто не стоит моего времени, чтобы сделать в Интернете исследователь.

Однако это отлично работает в ie9, поэтому я думаю, что плохо удалить этот эффект для браузеров меньше, чем ie9.

ответ

2

Чтобы установить непрозрачность прозрачного изображения PNG, вам необходимо использовать фильтр AlphaImageLoader, , даже в IE8.

EDIT: Кроме того, необходимо добавить alpha фильтр в CSS, например:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path", sizingMethod="scale"),alpha(opacity=100); 

В противном случае, Jquery очистит существующий фильтр, который добавляет alpha фильтр.

+0

Загрузка изображения с использованием alphaImageLoader изображение «hover» отображается при загрузке страницы, а затем, когда вы наводите курсор на ссылку, оно исчезает до тех пор, пока вы не обновите страницу. Как я могу это исправить? – Hailwood

+0

@ Hailwood: Я забыл упомянуть, что вам нужно также явно добавить фильтр 'alpha' в CSS. – SLaks

0

Это сообщение от Dave Шей mezzoblue.com может помочь вам: http://mezzoblue.com/archives/2010/05/20/ie8_still_fa/

Он отмечает все методы, которые он пытался, и окончательное решение, он прибыл в конце:

Что сделал работа была маленькая библиотека под названием DD_belatedPNG, которая применяет PNG прозрачность через VML вместо AlphaImageLoader. Он рассчитан на IE6, но он отлично работает в IE7, как и у . Для IE8 я был вынужден бросить в метатег X-UA-Compatible и шаг IE8 до режима IE7 для этой конкретной страницы.

С крошечного предостережением в конце

Это все еще не совершенны. Я заметил слабый белый ограничивающий прямоугольник, выталкивающий через более низкие непрозрачности, которые вынудили меня изменить настройки зависания для всех версий IE. Но вы знаете, за все это, это хорошо хорошо хорошо достаточно.

Смежные вопросы