Hoe op te lossen/hack vervagen semi-transparante PNG fout in IE8?

Zoals u weet, IE6 heeft een bug die niet kan weergeven semi-transparante PNG-bestand zonder het gebruik van niet-standaard stijl als filter. In IE7, dit probleem is opgelost. Maar Het heeft nog steeds een fout met het PNG-bestand. Het kan niet correct weer te geven vervagen semi-transparante PNG-bestand. Je kunt duidelijk zien wanneer u tonen/verbergen functie in jQuery met semi-transparante PNG-bestand. De achtergrond van de afbeelding wordt weergegeven met niet-transparante kleur zwart.

Heb je enig idee voor het oplossen van deze vraag door het gebruik van jQuery.

Update

Laat zien mijn testen

de alt-tekst http://rabu4g.bay.livefilestore.com/y1pGVXLwPdkxudYLmIdnMpWTP_9up-8isxbPKX945Ui4ITnYWnR0msaa2NmUF-qJ-Q4a2AAGaiGHwaFSgR1HeplDIO0bWbyRODI/bug.png

Zoals je ziet, IE8 altijd onjuist wordt weergegeven PNG-24 afbeelding. Bovendien, IE8 nog correct weer te geven PNG-8 beeld als ik de fade(jQuery.fadeOut functie) het alleen. Maar Het onjuist weergeven PNG-8 beeld als ik de fade – & grootte(jQuery.verberg functie) op hetzelfde moment.

PS. U kunt mijn testen broncode van hier.

Bedankt,

InformationsquelleAutor Soul_Master | 2009-07-30



14 Replies
  1. 21

    Hey, ik weet niet of je nog op zoek naar een antwoord. Een paar dagen geleden had ik hetzelfde probleem met het animeren van een div met een PNG-afbeelding in. Ik probeerde vele oplossingen en het enige dat werkte prima, heb ik gecodeerd mezelf.

    Het probleem lijkt IE ontbreken van dekking ondersteuning en de juiste PNG-ondersteuning, dus het breekt PNG display na het toepassen van een dekking effect (ik geloof animatie kaders vertrouwen op de eigen MSIE filter “AlphaImageLoader” voor dekking effect op IE). Het merkwaardige (voor mij, dat begrijp nog steeds niet erg goed) is dat dit probleem kan worden opgelost met behulp van de dezelfde filter voor het laden van de afbeelding weergegeven voordat de animatie.

    Ik schreef een eenvoudig javascript geldt dat de filter voor elke afbeelding met .PNG extensie. Mijn animaties draaien prima op IE met het.

    Ik kopieer de code hieronder in. I ‘ ts kader onafhankelijke (het is pure JavaScript), maar je moet in je kader van de DOM klaar evenement (of gebruik domready.js zoals ik deed).

    var i;
    for (i in document.images) {
        if (document.images[i].src) {
            var imgSrc = document.images[i].src;
            if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
                document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
            }
        }
    }

    Laat het me weten als fijn voor je en als animatie liep vlot.
    Vriendelijke groeten!

    • Bedankt. Maar je antwoord niet helemaal oplossen van deze vraag. Want de oude beeld bestaat nog steeds. Zie mijn volgende afbeelding. i53.tinypic.com/mjvntf.png
    • Is er een manier om deze oplossing te werken voor de PNG ‘ s die achtergrond afbeelding op een geanimeerde DOM-element?
    • Ik schreef een jQuery plugin die handvatten achtergrond afbeeldingen en <img> tags gebaseerd zwaar op dit antwoord en een antwoord op een soortgelijke vraag.
    • Alejandro. Dank u wel voor uw oplossing van bovenstaande. NIETS anders werkte, maar ik had de andere oplossingen werken in verschillende situaties. Dit stukje JavaScript mijn probleem opgelost gemakkelijk en 100% aan het gewenste effect. Dank u zeer veel.
    • dank u! Stemmen als je wilt. Met vriendelijke groet.
    • je bent geweldig! Na een hele dag op zoek naar een oplossing die echt werkt, heb je de winnaar zijn!
    • Jammer dat dit niet zal werken voor sprites :-/
    • waarom niet?
    • Hrmmm, zou ik moeten zowel clip (aan een specifieke 10×1 en 1×10 segment en vervolgens schaal die via de AlphaImageLoader. Ik zie die schaal is het ook mogelijk om via blog.creonfx.com/internet-explorer/… en MSDN zegt het KAN clip, maar biedt geen documentatie over hoe het te doen. Ik moet om uit te vinden of het kan beide doen en verslag uit!
    • Ja, het ziet er zoals je kunt alleen een paperclip OF een schaal en niet beide tegelijk. Ik zou het gebruiken van aparte beelden in plaats van de 1 sprite als ik wil vergroten of te verkleinen.
    • u zegt dat u niet kunt toepassen beide filters? Waarom heb je nodig om op te schalen met behulp van een IE-filter?
    • Ik weet deze vraag is al oud, maar ik weet niet waarom dit niet voor u heeft gewerkt, het geldt alleen het filter van de afbeelding, geen duplicaten van de afbeelding. Misschien een ander ding dat je moet veranderen in je code? Veel mensen besloten dit probleem met mijn antwoord. Met vriendelijke groet.
    • Het werkt voor de meest voorkomende beeld element. Maar ik gebruik altijd een achtergrond afbeelding die uw code niet ondersteunen.
    • Ik zou hebben om de afbeelding te schalen, omdat de een zich herhalende achtergrondafbeelding, en ik zou clip, omdat het een beeld in een css-sprite. AlphaImageLoader kan de schaal OF de clip, maar niet beide tegelijkertijd. Ik kon altijd gewoon geen gebruik maken van een css sprite, maar ik wil niet om dat te doen.

  2. 7

    HTML

       <img src="image.png" class="iefix" width="16" height="16" />

    in CSS

    .iefix
    {
     /* IE hack */
      background:none\9; /* Targets IE only */
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader();
    }

    makkelijk, snel en leuk 🙂

  3. 6

    De oorzaak van het probleem lijkt te zijn van Microsoft IE een slechte ondersteuning voor de PNG-alpha-transparantie (in elke versie van IE). IE6 is de ergste dader door ver, waardoor de alpha-transparent pixels als een lichtblauwe kleur. IE7 en IE8 handvat PNG alpha-transparantie, maar kan niet omgaan met het wijzigen van de dekking van een alpha-transparante pixels in de PNG – zij maken als zwart in plaats van doorzichtig.

    Mijn eigen oplossingen voor dit afhankelijk van de situatie. Hier zijn een aantal benaderingen:

    1. Gewoon gebruik maken van een GIF. Gif ‘ s worden niet zo soepel (omwille van de beperkte kleur diepte), maar de pixels zijn volledig transparant.
    2. Gebruik maken van de IE PNG fix beschikbaar hier: http://git.twinhelix.com/cgit/iepngfix/ — open index.html en lees de reacties.
    3. Van animatie, maar niet animeren transparantie van PNG-afbeeldingen.
    4. Voorwaardelijk doen van een of alle van de bovenstaande behulp van ofwel JavaScript tests, voorwaardelijke opmerkingen, of het MSIE-enige “probleem” uitbreiding van CSS. Hier is hoe dat zou kunnen werken:

    Voorwaardelijke opmerkingen:

    <!-- in index.html, in the <head>: -->
    <!--[if IE 6]>
    <link  src="css/ie6only.css" />
    <![endif]-->

    In de css:

    /* ie6only.css */
    img { behavior: url("js/iepngfix.htc"); }

    Via JavaScript detectie:

    <script defer type="text/javascript">
    if(navigator.appName == "Microsoft Internet Explorer")
    { /* Do IE-specific stuff here */ }
    else
    { /* Non-IE-compatible stuff here */ }
    </script>

    De iepngfix.htc gedrag werkt door het vervangen van de PNG met een lege afbeelding (blank.gif) en vervolgens met behulp van Microsoft ‘ s DXImageTransform routines voor het laden van de PNG-als een filter op de lege afbeelding. Er zijn andere PNG oplossingen die er zijn, die werken door het te verpakken dingen in divs of overspanningen, maar die zal vaak het einde van uw lay-out, zodat ik ze kan vermijden.

    Hoop dat dit helpt.

  4. 5

    Heb ik een oplossing voor dit probleem voor internet explorer 6/7/8.

    Ongeveer als volgt uitziet:

    <div class="wrapper">
      <div class="image"></div>
    </div>
    
    ...
    
    /* I had to explicitly specify the width/height by pixel */
    .wrapper
    {
      width:100px;
      height:100px;
    }
    
    .image
    {
      width:100%;
      height:100%;
      background:transparent url('image.png') no-repeat;
    
      /* IE hack */
      background:none\9; /* Targets IE only */
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png", sizingMethod="crop");
    }
    
    ...
    
    $(".wrapper").fadeOut('slow');

    Opmerking dat de “filter” – attribuut impliciet doelen alleen IE.

    • Wat is “het beeld.png”? Het is transparant 1×1 beeld of een afbeelding die ik wil weergeven.
    • Geen haar de afbeelding die u wilt weergeven.
    • Deze oplossing is groot. Het werkt, maar op de achtergrond-positie stopt met werken. Is er een manier waarop we kunnen de achtergrond positie?
  5. 4

    Ik gebruikt deze functie om het laden van afbeeldingen in galerij carrousel. Het is gebaseerd op Alejandro García Iglesias ‘ s antwoord hierboven. Het verlost van de “black halo” in IE 6 & 8.

    function preloadImages(id) {
        var c = new Array();
        $(id+' img').each( function(j) {
            c[j] = new Image();
            c[j].src = this.src;
    
            if ( $.browser.msie ) {
                this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='"+ this.src +"')"; 
            }
        });
    
    }

    Oproep zoals deze:

    preloadImages('#Stage');
    • Ik probeerde ergens een dozijn transparantie hacks die beweert op te lossen the black halo. Dit is de enige oplossing die ik vond die werkte. Bedankt!
  6. 4

    Ik vond de oplossing van het probleem bij toeval toen ik het proberen op te lossen IE8 bug in de volgende afbeelding.

    Hoe op te lossen/hack vervagen semi-transparante PNG fout in IE8?

    De makkelijkste manier, hoeft U alleen het definiëren van de achtergrond van de huidige afbeelding, zoals de onderstaande code. Of zie je de volledige broncode en de demo op mijn JsFiddle

    #img2
    {
        background:#fff;   
    }

    Echter, als u een aantal complexe beeld als mijn fout, je moet proberen toe te voegen bijna onzichtbare laag onder je afbeelding en zet de achtergrond kleur naar de kleur die je wilt.

    Hoe op te lossen/hack vervagen semi-transparante PNG fout in IE8?

    • helaas, als u wilt een andere afbeelding achter uw afbeelding zal dit niet werken – u kan ook gebruik maken van een niet-transparante afbeelding met de achtergrond kleur die je wilt. Duidelijk uw oplossing is eenvoudiger wanneer u een afbeelding op veel verschillende kleuren achtergronden, maar het is niet echt het probleem.
  7. 2

    Waarom probeer je niet met PNG8. PNG8 is algemeen bekend als volledig transparant als een GIF-bestand formaat. Echter uitgevoerd met Vuurwerk het kan worden semi-transparant is PNG24. Het voordeel is dat IE6 geeft de PNG8 met semi-transparante pixels als het een GIF – of met volledige transparantie, maar IE7 en 8 correct weergeven als PNG24 en als u fade met jQuery of wat js library wordt geen weergave van de achtergrond met grijs, omdat het geen gebruik van de bekende -eigenschap filter.

    • Ik kan geen gebruik maken Png-8 in plaats van Png-24. Het heeft geen voordeel voor de semi-transparante afbeelding. Bovendien, ik kan het niet maken van semi-transparante Png-8 door het gebruik van Photoshop CS4.
    • Zie ook mijn bijgewerkt vraag.
    • En als het verschijnt, kunt u het genereren van semi-transparante PNG8 zonder de hulp van Vuurwerk. Controleer voor de pngquant.
    • PNG8s zijn goed voor een aantal dingen, maar ze helpen niet de IE6 transparantie probleem veel. Transparante PNG8s kijk nog steeds vreselijk in IE6, net op een iets andere manier.
  8. 2

    ik gebruik gemaakt van een gemodificeerde PNG fix voor IE6 werkt het gewoon geweldig:

    (function ($) {
    if (!$) return;
    $.fn.extend({
        fixPNG: function(sizingMethod, forceBG) {
                if (!($.browser.msie)) return this;
                var emptyimg = "x.gif"; //Path to empty 1x1px GIF goes here
                sizingMethod = sizingMethod || "scale"; //sizingMethod, defaults to scale (matches image dimensions)
                this.each(function() {
                        var isImg = (forceBG) ? false : jQuery.nodeName(this, "img"),
                                imgname = (isImg) ? this.src : this.currentStyle.backgroundImage,
                                src = (isImg) ? imgname : imgname.substring(5,imgname.length-2);
                        this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + sizingMethod + "')";
                        if (isImg) this.src = emptyimg;
                        else this.style.backgroundImage = "url(" + emptyimg + ")";
                });
                return this;
        }
    });
    })(jQuery);

    vergeet niet om te uploaden x.gif. (een transparante 1×1 gif)

  9. 1

    Het voordeel is dat IE6 geeft de PNG8 met semi-transparante pixels als het een GIF – of met volledige transparantie, maar IE7 en 8 correct weergeven als PNG24 en als u fade met jQuery of wat js library wordt geen weergave van de achtergrond met grijs, omdat het geen gebruik van de bekende -eigenschap filter.

    Er is maar één manier in IE om een dekking te transformeren. filter: alpha(opacity:).
    Hoe anders moet jQuery dit doen?

  10. 1

    Niets werkte echt voor mij zo ver dat ik het gelezen heb, het combineren van de dekking aanpassen via CSS en transparante png ‘ s. Deze oplossing eindigde voor mij op een geanimeerde dekking pagina op IE8. Andere oplossingen die op deze pagina niet werken.

    #img {
        background:transparent;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50) progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png')"; /* IE8 */
        zoom:1;
        width:600px;
        height:400px;
    }
    
    <div id='img'></div>

    Let ook op de filter heeft een Alpha filter eerste, dan is het AlphaImageLoader.

  11. 0

    Im met dezelfde vervelende probleem met IE8 en IE7.. iemand getest als Cmc-oplossingen is de truc?

    Mijn url is http://www.onlinebrand.dk (Top menu verdwijnt in, zoals Google 🙂 Maar IE niet schelen.)

    EDIT: Zojuist getest en het zelf, en zelfs als ik stel de breedte en hoogte van, en de herhaling van de img. Het werkt niet

    Ik vond ander werk rond, waar Fadein een wrapper in plaats van de div met het .png-bg beeld. En het soort werkte, Im is nu aan de som soort van transparantie in IE, maar ook sommige padding/margin..Helemaal raar..

    Bill Gates, Wat met deze? Waarom kunnen we niet met elkaar opschieten?

  12. 0
    1. Het definiëren van een solide achtergrond kleur aan uw afbeelding:

      .container img {
      background-color: white;
      }

    2. Definieer de achtergrond-afbeelding css eigenschap van je foto zijn src kenmerk:

      $(‘img.png-trans’).elke(function() {
      $(this).css(‘background-image’, $(this).attr(‘src’));
      });

    Voordeel: u hoeft niet te wijzigen van uw markup

    Nadeel: soms is het toepassen van een effen achtergrondkleur is niet een aanvaardbare oplossing. Het is normaal voor mij.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *