PNG背景透明问题

方法一、通过 css 和 IE 专有属性 behavior 解决整站 png 背景透明问题

<style type="text/css">

<!--

img { behavior:url(/iepngfix.htc); }

-->

</style>

htc文件内容

<public:component>

<public:attach event="onpropertychange" onevent="doFix()" />

<script type="text/javascript">

// IE5.5+ PNG Alpha Fix v1.0RC3

// (c) 2004-2005 Angus Turnbull http://www.twinhelix.com

// This is licensed under the CC-GNU LGPL, version 2.1 or later.

// For details, see: http://creativecommons.org/licenses/LGPL/2.1/

// This must be a path to a blank image. That's all the configuration you need.

var blankImg = '/spacer.gif';

var f = 'DXImageTransform.Microsoft.AlphaImageLoader';

function filt(s,m)

{

if (filters[f])

{

filters[f].enabled = s ? true : false;

if (s) with (filters[f])

{

src = s;

sizingMethod = m;

}

}

else if (s)

{

style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';

}

}

function doFix()

{

// Assume IE7 is OK

if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) || (event && !/(background|src)/.test(event.propertyName)))

{

return;

}

var bgImg = currentStyle.backgroundImage || style.backgroundImage;

if (tagName == 'IMG')

{

if ((/\.png$/i).test(src))

{

// this tests to see if the image has already been replaced once before

if (src.indexOf('?repurl=') == -1)

{

if (currentStyle.width == 'auto' && currentStyle.height == 'auto')

{

style.width = offsetWidth+'px';

}

filt(src,'scale');

src = blankImg+'?repurl='+src;

}

}

else if (src.indexOf(blankImg) < 0)

{

filt();

}

}

else if (bgImg && bgImg != 'none')

{

if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))

{

var s = RegExp.$1;

if (currentStyle.width == 'auto' && currentStyle.height == 'auto')

{

style.width = offsetWidth+'px';

}

style.backgroundImage = 'none';

filt(s,'crop');

// IE link fix

for (var n=0;n<childNodes.length;n++)

{

if (childNodes
.style) { childNodes
.style.position = 'relative'};

}

}

else filt();

}

}

doFix();

</script>

</public:component>

方法二、通过 css ie滤镜解决

<style type="text/css">

<!--

.pngpic { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/pngpic.png',sizingMethod='crop'); }

-->

</style>

方法三、通过 javascript 和 css 滤镜解决 IE 整站 png 背景透明问题

<script type="text/javascript" language="javascript">

function enablePngImages() {

var imgArr = document.getElementsByTagName("IMG");

for(i=0; i<imgArr.length; i++){

if(imgArr[i].src.toLowerCase().lastIndexOf(".png") != -1){

imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgArr[i].src + "', sizingMethod='auto')";

imgArr[i].src = "spacer.gif";

}

if(imgArr[i].currentStyle.backgroundImage.lastIndexOf(".png") != -1){

var img = imgArr[i].currentStyle.backgroundImage.substring(5,imgArr[i].currentStyle.backgroundImage.length-2);

imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";

imgArr[i].style.backgroundImage = "url(spacer.gif)";

}

}

}

function enableBgPngImages(bgElements){

for(i=0; i<bgElements.length; i++){

if(bgElements[i].currentStyle.backgroundImage.lastIndexOf(".png") != -1){

//alert(bgElements[i]);

var img = bgElements[i].currentStyle.backgroundImage.substring(5,bgElements[i].currentStyle.backgroundImage.length-2);

bgElements[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";

bgElements[i].style.backgroundImage = "url(spacer.gif)";

}

}

}

</script>

<img src="pngpic.png" alt="" border="0" />

<!--[if lt IE 7]>

<script type='text/javascript'>

var bgElements;

enablePngImages();

if(bgElements){

enableBgPngImages(bgElements);

}

</script>

<![endif]-->