Internet Explorer: полупрозрачные изображения - PullRequest
Новая
       21

Internet Explorer: полупрозрачные изображения

3 голосов
/ 24 августа 2010

У меня есть два изображения ниже.

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

Они настроены следующим образом:

<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 и т. Д. Но в Internet Explorer изображение имеет сплошной черный фон с прозрачностью.

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

NB. Меня беспокоит только то, что 7/8 не 6.

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

<ч /> Обновление
Я решил, что это просто не стоит моего времени в Internet Explorer.

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

Ответы [ 2 ]

2 голосов
/ 24 августа 2010

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

РЕДАКТИРОВАТЬ : Вам также необходимо добавить фильтр alpha в CSS, например: 

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

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

0 голосов
/ 24 августа 2010

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

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

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

С крошечным предупреждением наконец

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

...