Как сохранить альфа-прозрачность PNG при использовании & # 8220; -ms-filter & # 8221; имущество
-
05-07-2019 - |
Вопрос
У меня есть следующий HTML:
<a><img src="myfile.png" /> Some text</a>
И это CSS:
a:hover
{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
opacity: .75;
}
Проблема с этим возникает как в IE 8, так и в IE 7.
Когда изображение PNG подчиняется -ms-filter или filter , его альфа-прозрачность нарушается. Попробуйте, и вы увидите. Это ошибка в IE 8 и IE 7.
Могу ли я удалить " -ms-opacity " и «фильтр» свойства применяются в CSS? Какой синтаксис для этого? (например, что-то вроде -ms-filter: " " ;; )
Кто-нибудь знает обойти эту проблему?
Решение
ОБНОВЛЕНИЕ: Фильтр AlphaImageLoader , примененный непосредственно к img, может переопределить Альфа-фильтр. Что касается удаления фильтра, вы пробовали filter: none;
?
Да, программно ориентируйтесь на IE6 и ниже с условными комментариями.
<!--[if lt IE 7]>
<style>a:hover{filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);}</style>
<![endif]-->
Также такие сценарии, как IE7-js , будут обрабатывать прозрачность PNG для вас без помех ваш CSS с нестандартным кодом.
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
Другие советы
Просто приукрашивая ответ SpliFF, я мог бы решить эту проблему, добавив на свою страницу следующий jQuery:
$(function() {
if (jQuery.browser.msie)
$('img[src$=".png"]').each(function() { // must have quotes around .png
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+this.src+",sizingMethod='scale')";
});
});
При этом AlphaImageLoader будет применен также ко всем PNG на странице.
Для людей, ищущих другой ответ, я решил эту проблему с помощью следующего кода, который написал сам на простом JavaScript, поэтому он не зависит от фреймворка. Тем не менее, вы должны поместить его в событие DOM ready вашего фреймворка (или вы можете использовать domready.js, как я). Он загружает все изображения с расширением .PNG с помощью AlphaImageLoader. Это нужно сделать до того, как вы примените альфа-фильтр (вы можете применить фильтр и после этого кода с помощью JS).
Код ниже:
var i;
for (i in document.images) {
if (document.images[i].src) {
var imgSrc = document.images[i].src;
if (imgSrc.toLowerCase().substr(imgSrc.length-4) === '.png') {
document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
}
}
}
Не забудьте поместить его в условные комментарии для IE:
<!--[if IE]><![endif]-->
Пожалуйста, дайте мне знать, если это работает нормально. С уважением!