Jak zachować przezroczystość alfa PNG podczas używania "-ms filtr" własność

Mam następujące HTML:Jak zachować przezroczystość alfa PNG podczas używania "-ms filtr" własność

<a><img src="myfile.png" /> Some text</a>

i to CSS:

a:hover 
{ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75); 
    opacity: .75; 
}

Problem ten występuje zarówno w IE 8 i IE 7.

Gdy obraz PNG podlega -MS filtr lub filtra jego alfa Transpa rency jest zrujnowana. Wypróbuj go, a zobaczysz. Jest to błąd zarówno w IE 8, jak i IE 7.

Czy mogę usunąć właściwości "-ms-opacity" i "filter" stosowane w CSS? Jaka jest to składnia? (np. coś takiego jak -ms-filter: "";)

Czy ktoś zna pracę związaną z tym problemem?

Źródło

2009-06-17 cbp

Nie sądzę, że zrozumieliśmy twoje pytanie. Czy mógłbyś spróbować go zmienić? –

@SpliFF i in. - Czy ktoś może dodać (lub edytować) odpowiedź, aby podać wartość css wymaganą do utworzenia png z przezroczystością częściową z kryciem 75% w IE 7 i 8. To jest oryginalne pytanie, a odpowiedź nie jest kompletna. – OrangeDog

AKTUALIZACJA: AlphaImageLoader Filtr zastosowany bezpośrednio na obrazie może przesłonić filtr Alfa. Jeśli chodzi o usuwanie filtra, czy wypróbowałeś filter:none;?

Tak, programowo ustaw docelowy IE6 i poniżej z komentarzami warunkowymi.

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

także skrypty jak IE7-js zajmie przejrzystości PNG dla ciebie bez zaśmiecania CSS z niestandardowym kodem.

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

Źródło

2009-06-17 03:43:23 SpliFF

Niestety nie jestem zainteresowany IE 6 - staram się uzyskać to działa w IE7 i IE8 przy użyciu właściwości "-ms-filter" lub "filter" css. – cbp

Rozwiązanie działa również dla ie7. po prostu zmień warunek na lt IE8, a skrypt na ie8.js – SpliFF

Ale problem występuje nawet w IE 8: gdy zastosujesz właściwości "filter" lub "-ms-filter" w CSS, żadna przezroczystość alfa PNG już nie działa. – cbp

tylko upiększanie odpowiedź Spliff za, mogę rozwiązać ten problem poprzez dodanie następującego jQuery na mojej stronie:

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

ten zastosuje AlphaImageLoader też wszystkie PNG na stronie.

Źródło

2009-06-17 04:10:04 cbp

Ten mały skrypt (i kilka tagów span wokół obrazów, które chciałbym zniknąć) jest cudem i skarbem dla tych, którzy muszą walczyć z obrzydliwością MSIE. – Brian

Dla osób szukających innej odpowiedzi, rozwiązałem to za pomocą poniższego kodu, który napisałem sam w zwykłym kodzie JavaScript, więc jest niezależny od struktury. Nadal musisz umieścić go wewnątrz zdarzenia DOM gotowy ramowego (lub możesz użyć domready.js jak ja). Ładuje wszystkie obrazy z rozszerzeniem .PNG z AlphaImageLoader. Musi to być zrobione zanim zastosujesz filtr Alpha (możesz zastosować filtr po tym kodzie z JS również).

Poniższy kod:

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

Pamiętaj, aby umieścić go wewnątrz komentarzy warunkowych dla IE:

<!--[if IE]><![endif]-->

Proszę dać mi znać, jeśli to działało dobrze. Pozdrawiam!

Źródło

2010-11-08 18:08:07

Jak zachować przezroczystość alfa PNG podczas używania "-ms filtr" własność

Odpowiedz

Powiązane problemy