WEB技术论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: ASP asp.net php
查看: 433|回复: 0
打印 上一主题 下一主题

IE6显示png透明背景、图片的方法

  [复制链接]

534

主题

541

帖子

2044

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2044
跳转到指定楼层
楼主
发表于 2018-1-6 15:03:38 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

PNG格式比起GIF来表现色彩更丰富,特别是表现渐变以及背景透明的渐变要比GIF格式出色很多,目前,最新的浏览器基本上都支持PNG格式。但是IE6不支持PNG背景透明,会显示一个灰色的框。 解决的办法也是有多种,在这里列出常用的其中一种:

IE6显示透明PNG背景:

使用css滤镜。

CSS Code复制内容到剪贴板

background-image:none,filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=/"/images/bg.png /> 例如:

CSS Code复制内容到剪贴板
.main{background:url(/images/bg.png) no-repeat; width:960px; _background-image:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=/"/images/bg.png);}   
值得注意的是,此时div会被遮盖,该div下面的链接将不可点击,可以在main下面的div加上position:relative就可以了。

IE6显示透明PNG图片:

在网页的头部head之间加入下面的javascript代码:

JavaScript Code复制内容到剪贴板
<!--[if IE 6]>        
<script language="javascript">      
function correctPNG()      
{      
for(var i=0; i<document.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=/index.html'" + img.src + "\', sizingMethod='scale');\"></span>"      
   img.outerHTML = strNewHTML      
   i = i-1      
   }      
}      
}      
window.attachEvent("onload", correctPNG);      
</script>      
<![endif]--> ?6?7      
爱仿站的中年人
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

|手机版|码农集营 ( ) 深圳龙岗交友群

GMT+8, 2018-11-7 18:27 , Processed in 0.090403 second(s), 22 queries .

Powered by 码农集营 X3.4

快速回复 返回顶部 返回列表