2024年2月9日发(作者：)

PNG透明背景失效而显示灰色的最佳解决方法

网页图片是选择使用GIF或JPG格式?PNG透明背景失效而显示灰色的最佳解决方法2010年07月09日星期五上午10：56网页设计中，保证图片清晰的前提下，图片越小越好。因为这样可以减少带宽占用，加快网页打开速度。尤其对于门户网站和访问量很高的网站，如果图片都能比原来小10K的话，那么节省的带宽相当明显。那么就要求设计师在制作或生成图像时，选择合适的格式和质量，尽量把图片体积压缩的更小。下面就网上常用的两种格式gif和jpg该如何选择阐述下本人的看法。

何时选择gif格式?何时选择jpg格式?

对于gif和jpg格式的选择，没有固定的限制，但要把握好一点。图片色彩单一、由色块或文字组成，较少渐变色的尽量采用gif格式，这样可以减少很大体积；当图片色彩丰富，过渡色较多时建议采用jpg，下面看看两个例子。

看看本站的logo，同样尺寸的图片，保存成gif格式要比jpg格式小多了，把图片放大时会发现jpg格式会产生噪点，质量还不如gif，那当然要选择gif了，因为这个logo色彩非常单一。

看看上边这两张图片，从百度上搜索后截取了一部分，同时保存成两种格式，左边的是gif格式，右边的是jpg格式。从图片的属性看，gif格式大小为63.1KB，jpg格式大小为46.4KB，如果质量要求不高的话还可以再压缩。但从目前就可以明显看出，jpg格式要比gif清晰多了，gif格式自动把相似色彩改变成一种色彩，这也是上个例子中gif格式不产生噪点的原因。

通过这两个例子，相信你对网页设计中选择gif格式和jpg格式有所了解了吧，不过在实际应用当中，建议保存成两种格式，多对比，慢慢就会发现什么时候该用gif，什么时候该用jpg了。

如果PNG图片中含有透明部分，那么透明部分的显示就不正常了。解决这个问题大致有以下方法(其原理都是通过AlphaImageLoader滤镜来解决)。方法一：div style="filter：mageLoader(src=/images/)；width：200px；height：50px"/div点评：这种方法虽然较好的解决了IE

5+的浏览器，但却得本来能正常显示透明PNG图片的FireFox无法正常显示！方法二：script type="text/javascript"//PNG纠正控件1.0 For IE 5.5或更高.//作者：舜子function isIE(){if(e！="Microsoft

Internet Explorer"{return false}return true}function

correctPNG(){for(var i=0；i ；i++){var

img= var LW= var LH= var

imgName=rCase()if(ing(-3,)=="NG"{+="mageLoader(src="++",sizingmethod=scale)；"="/images/"//为1px*1px的透明gif图片=LW

=LH}}}if(isIE()){Event("onload",correctPNG)；}/script点评：这种方法确实能解决这个问题，但是如果不是在本地调试，通常需要一段时间的转换！方法三：div id="header"！--此DIV为需要插入PNG图片的区域--script type="text/javascript"if(e！="Microsoft Internet Explorer"{("img

src="/images/"width="200"height="50"alt="站长吧"/"；}else{("img style="filter：mageLoader(src=/images/,sizingmethod=scale)；width：200px；height：50px；"src="{$rootpath}/images/"width="200"height="50"alt="站长吧"/"；}/script div点评：事实上网页中绝对需要使用透明PNG图片的地方并不多，所以如果你的网页中仅仅是一两处使用透明PNG图片，建议用这种方法。如果浏览者禁用了js,方法二和三当然失去了作用。针对方法三，可以做一些完善：div id="header"div id="Index_header"图片简要说明,正常浏览本站请不要禁用js/div div script

type="text/javascript"if(e！="Microsoft Internet

Explorer"){mentById('logo').innerHTML="img

src="/images/"width="200"height="50"alt="站长吧"/"}else{mentById('logo').innerHTML="img

style="filter：mageLoader(src=/images/,sizingmethod=scale)；width：200px；height：50px；"src="/images/"width="200"height="50"alt="站长吧"/"}/script