解决图片的几种办法.docVIP

使IE6下PNG背景透明的七种方法任你选 PNG图像格式介绍： PNG是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式 网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG’s Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可 存储多到16位的α通道数据。 IE6下PNG背景透明的显示问题 PNG格式比起GIF来表现色彩更丰富，特别是表现渐变以及背景透明的渐变要比GIF格式出色很多，目前，必威体育精装版的浏览器基本上都支持PNG格式。但是IE6不支持PNG背景透明，会显示一个灰色的框。 IE6下PNG背景透明的解决办法 .pngImg { background:url(image.png); _background:url(image.gif);} 注意上文的_号，目前IE7,8以及Firefox浏览器等都不支持此CSS语法，只有IE6识别。因此，其他浏览器会调用PNG，而IE6刚调用GIF。 二.滤镜filter解决IE6下背景灰 background:url(a.png) repeat-x 0 0; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=a.png ,sizingMethod=crop); 上面的原理是其他调用PNG，IE6,则先设背景没有，然后调用滤镜使之显示PNG图片。 缺陷：IE6下背景无法平铺，这个问题很严重。同时在性能上也有小问题，页面中次数不是很多的时候该办法还是可行的。 AlphaImageLoader滤镜会导致该区域的链接和按钮无效，解决的办法是为链接或按钮添加：position: relative;这样条代码，使其相对浮动。AlphaImageLoader无法设置背景的重复，所以对图片的切图精度会有很高的精确度要求。 解决IE下的链接无效可用最后面的方法： 三.利用JS解决html中的img(插入在网页中的png图像)png背景灰问题 页面中插入一段js即可。原理同上，只是将img标签用span标签替换掉，并且通过滤镜设置该span标签的background。它会将所有插入的PNG都如此处理。 !--[if IE 6] script function correctPNG() { for(var i=0; idocument.images.length; i++) { var img = document.images[i]; var imgName = img.src.toUpperCase(); if (imgName.substring(imgName.length-3, imgName.length) == PNG) { var imgID = (img.id) ? id= + img.id + : ; var imgClass = (img.className) ? class= + img.className + : ; var imgTitle = (img.title) ? title= + img.title + : title= + img.alt + ; var imgStyle = display:inline-block; + img.style.cssText; if (img.align == left) imgStyle = float:left; + imgStyle; if (img.align == right) imgStyle = float:right; + imgStyle; if (img.parentElement.href) imgStyle = cursor:hand; + imgStyle; var strNewHTML = span + imgID + imgClass + imgTitle + style=\ + width: + img.width + px; height: + img.height + px; + imgStyle + ; + filter:progid:DXImageTransform.Microsoft.AlphaImageLoader + (src= + img.src + , sizingMethod=scale);\/span; img.outer