"-ms-filter"속성을 사용할 때 PNG 알파 투명성을 유지하는 방법

Question

다음 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 또는 필터, 그것의 알파 투명성은 파멸됩니다. 시도해 보면 볼 수 있습니다. IE 8과 IE 7의 버그입니다.

CSS에 적용되는 "-ms-opacity"및 "필터"속성을 제거 할 수 있습니까? 이것의 구문은 무엇입니까? (예 : 같은 것 -ms-filter : "";)

이 문제에 대한 작업을 아는 사람이 있습니까?

Answer 1

업데이트: 알파 이마 겔 로더 IMG에 직접 적용된 필터는 알파 필터를 무시할 수 있습니다. 필터를 제거하려면 시도해 보았습니다 filter:none; ?

예, 프로그래밍 방식으로 IE6 이상을 조건부 의견으로 대상으로합니다.

<!--[if lt IE 7]>
<style>a:hover{filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);}</style>
<![endif]-->

스크립트도 좋아합니다 IE7-JS 비표준 코드로 CSS를 어수선하지 않고 PNG 투명성을 처리합니다.

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

Answer 2

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')";
        });
});

이것은 페이지의 모든 PNG에 알파 이마 겔 로더를 적용합니다.

Answer 3

다른 답변을 찾는 사람들을 위해, 나는이 다음 코드를 사용하여 이것을 해결했습니다. 그래도 프레임 워크의 DOM Ready 이벤트 안에 넣어야합니다 (또는 내가했던 것처럼 domready.js를 사용할 수 있습니다). Alphaimageloader와 함께 .png 확장으로 모든 이미지를로드합니다. 알파 필터를 적용하기 전에 수행해야합니다 (이 코드 후에도 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]-->

잘 작동하는지 알려주세요. 친절한 안부!