Как сохранить альфа-прозрачность PNG при использовании свойства "-ms-filter" - PullRequest
Новая
       50

Как сохранить альфа-прозрачность PNG при использовании свойства "-ms-filter"

5 голосов
/ 17 июня 2009

У меня есть следующий 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-фильтр или фильтр , его альфа-прозрачность нарушается. Попробуйте, и вы увидите. Это ошибка как в IE 8, так и в IE 7.

Можно ли удалить свойства "-ms-opacity" и "filter", применяемые в CSS? Какой синтаксис для этого? (например, что-то вроде -ms-filter: ""; )

Кто-нибудь знает обойти эту проблему?

Ответы [ 3 ]

10 голосов
/ 17 июня 2009

Просто украсив ответ 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 на странице.

4 голосов
/ 17 июня 2009

ОБНОВЛЕНИЕ: 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]-->
2 голосов
/ 08 ноября 2010

Для людей, которые ищут другой ответ, я решил эту проблему с помощью следующего кода, который я написал сам на простом 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]-->

Пожалуйста, дайте мне знать, если это работает нормально. С уважением!

...