代碼 //?IE5.5+?PNG?Alpha?Fix?v2.0?Alpha:?Background?Tiling?Support
//?(c)?2008?Angus?Turnbull?http://www.twinhelix.com

//?This?is?licensed?under?the?GNU?LGPL,?version?2.1?or?later.
//?For?details,?see:?http://creativecommons.org/licenses/LGPL/2.1/

var?IEPNGFix?=?window.IEPNGFix?||?{};

IEPNGFix.tileBG?=?function(elm,?pngSrc,?ready)?{
????//?Params:?A?reference?to?a?DOM?element,?the?PNG?src?file?pathname,?and?a
????//?hidden?"ready-to-run"?passed?when?called?back?after?image?preloading.

????var?data?=?this.data[elm.uniqueID],
????????elmW?=?Math.max(elm.clientWidth,?elm.scrollWidth),
????????elmH?=?Math.max(elm.clientHeight,?elm.scrollHeight),
????????bgX?=?elm.currentStyle.backgroundPositionX,
????????bgY?=?elm.currentStyle.backgroundPositionY,
????????bgR?=?elm.currentStyle.backgroundRepeat;

????//?Cache?of?DIVs?created?per?element,?and?image?preloader/data.
????if?(!data.tiles)?{
????????data.tiles?=?{
????????????elm:?elm,
????????????src:?'',
????????????cache:?[],
????????????img:?new?Image(),
????????????old:?{}
????????};
????}
????var?tiles?=?data.tiles,
????????pngW?=?tiles.img.width,
????????pngH?=?tiles.img.height;

????if?(pngSrc)?{
????????if?(!ready?&&?pngSrc?!=?tiles.src)?{
????????????//?New?image??Preload?it?with?a?callback?to?detect?dimensions.
????????????tiles.img.onload?=?function()?{
????????????????this.onload?=?null;
????????????????IEPNGFix.tileBG(elm,?pngSrc,?1);
????????????};
????????????return?tiles.img.src?=?pngSrc;
????????}
????}?else?{
????????//?No?image?
????????if?(tiles.src)?ready?=?1;
????????pngW?=?pngH?=?0;
????}
????tiles.src?=?pngSrc;

????if?(!ready?&&?elmW?==?tiles.old.w?&&?elmH?==?tiles.old.h?&&
????????bgX?==?tiles.old.x?&&?bgY?==?tiles.old.y?&&?bgR?==?tiles.old.r)?{
????????return;
????}

????//?Convert?English?and?percentage?positions?to?pixels.
????var?pos?=?{
????????????top:?'0%',
????????????left:?'0%',
????????????center:?'50%',
????????????bottom:?'100%',
????????????right:?'100%'
????????},
????????x,
????????y,
????????pc;
????x?=?pos[bgX]?||?bgX;
????y?=?pos[bgY]?||?bgY;
????if?(pc?=?x.match(/(\d+)%/))?{
????????x?=?Math.round((elmW?-?pngW)?*?(parseInt(pc[1])?/?100));
????}
????if?(pc?=?y.match(/(\d+)%/))?{
????????y?=?Math.round((elmH?-?pngH)?*?(parseInt(pc[1])?/?100));
????}
????x?=?parseInt(x);
????y?=?parseInt(y);

????//?Handle?backgroundRepeat.
????var?repeatX?=?{?'repeat':?1,?'repeat-x':?1?}[bgR],
????????repeatY?=?{?'repeat':?1,?'repeat-y':?1?}[bgR];
????if?(repeatX)?{
????????x?%=?pngW;
????????if?(x?>?0)?x?-=?pngW;
????}
????if?(repeatY)?{
????????y?%=?pngH;
????????if?(y?>?0)?y?-=?pngH;
????}

????//?Go!
????this.hook.enabled?=?0;
????if?(!({?relative:?1,?absolute:?1?}[elm.currentStyle.position]))?{
????????elm.style.position?=?'relative';
????}
????var?count?=?0,
????????xPos,
????????maxX?=?repeatX???elmW?:?x?+?0.1,
????????yPos,
????????maxY?=?repeatY???elmH?:?y?+?0.1,
????????d,
????????s,
????????isNew;
????if?(pngW?&&?pngH)?{
????????for?(xPos?=?x;?xPos?<?maxX;?xPos?+=?pngW)?{
????????????for?(yPos?=?y;?yPos?<?maxY;?yPos?+=?pngH)?{
????????????????isNew?=?0;
????????????????if?(!tiles.cache[count])?{
????????????????????tiles.cache[count]?=?document.createElement('div');
????????????????????isNew?=?1;
????????????????}
????????????????var?clipR?=?(xPos?+?pngW?>?elmW???elmW?-?xPos?:?pngW),
????????????????????clipB?=?(yPos?+?pngH?>?elmH???elmH?-?yPos?:?pngH);
????????????????d?=?tiles.cache[count];
????????????????s?=?d.style;
????????????????s.behavior?=?'none';
????????????????s.left?=?xPos?+?'px';
????????????????s.top?=?yPos?+?'px';
????????????????s.width?=?clipR?+?'px';
????????????????s.height?=?clipB?+?'px';
????????????????s.clip?=?'rect('?+
????????????????????(yPos?<?0???0?-?yPos?:?0)?+?'px,'?+
????????????????????clipR?+?'px,'?+
????????????????????clipB?+?'px,'?+
????????????????????(xPos?<?0???0?-?xPos?:?0)?+?'px)';
????????????????s.display?=?'block';
????????????????if?(isNew)?{
????????????????????s.position?=?'absolute';
????????????????????s.zIndex?=?-999;
????????????????????if?(elm.firstChild)?{
????????????????????????elm.insertBefore(d,?elm.firstChild);
????????????????????}?else?{
????????????????????????elm.appendChild(d);
????????????????????}
????????????????}
????????????????this.fix(d,?pngSrc,?0);
????????????????count++;
????????????}
????????}
????}
????while?(count?<?tiles.cache.length)?{
????????this.fix(tiles.cache[count],?'',?0);
????????tiles.cache[count++].style.display?=?'none';
????}

????this.hook.enabled?=?1;

????//?Cache?so?updates?are?infrequent.
????tiles.old?=?{
????????w:?elmW,
????????h:?elmH,
????????x:?bgX,
????????y:?bgY,
????????r:?bgR
????};
};


IEPNGFix.update?=?function()?{
????//?Update?all?PNG?backgrounds.
????for?(var?i?in?IEPNGFix.data)?{
????????var?t?=?IEPNGFix.data[i].tiles;
????????if?(t?&&?t.elm?&&?t.src)?{
????????????IEPNGFix.tileBG(t.elm,?t.src);
????????}
????}
};
IEPNGFix.update.timer?=?0;

if?(window.attachEvent?&&?!window.opera)?{
????window.attachEvent('onresize',?function()?{
????????clearTimeout(IEPNGFix.update.timer);
????????IEPNGFix.update.timer?=?setTimeout(IEPNGFix.update,?100);
????});
}

?

轉載于:https://www.cnblogs.com/samlin/archive/2010/01/11/1644273.html

總結

以上是生活随笔為你收集整理的修复png bug的脚本的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。