"-ms-filter"속성을 사용할 때 PNG 알파 투명성을 유지하는 방법
-
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 또는 필터, 그것의 알파 투명성은 파멸됩니다. 시도해 보면 볼 수 있습니다. IE 8과 IE 7의 버그입니다.
CSS에 적용되는 "-ms-opacity"및 "필터"속성을 제거 할 수 있습니까? 이것의 구문은 무엇입니까? (예 : 같은 것 -ms-filter : "";)
이 문제에 대한 작업을 아는 사람이 있습니까?
해결책
업데이트: 알파 이마 겔 로더 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]-->
다른 팁
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에 알파 이마 겔 로더를 적용합니다.
다른 답변을 찾는 사람들을 위해, 나는이 다음 코드를 사용하여 이것을 해결했습니다. 그래도 프레임 워크의 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]-->
잘 작동하는지 알려주세요. 친절한 안부!