让IE6支持png图片格式的方法
第 1 种方法:定义一个样式,给某个div应用这个样式后,div的透明png背景图片自动透明了。(注意两处图片的路径写法不一样,本例中,icon_home.png图片与html文件在相同目录)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.qq {
height: 90px;
width: 90px;
background-image: url(icon_home.png)!important;/* FF IE7 */
background-repeat: no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); /* IE6 */
_ background-image: none; /* IE6 */
}
-->
</style>
</head>
<body>
<div class="qq"></div>
</body>
</html>
第 2 种方法: 给img定义样式,页面上所有透明png即自动透明了。(这方法只对直接插入的图片有效,对背景图无效)注意,要准备一个透明的小图片transparent.gif,大小不限。必须放在和html相同的目录
请勿大量使用,否则会导致页面打开很慢!!!)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.mypng img {
azimuth: expression(
this.pngSet?this.pngSet=true:(deName == "IMG" && LowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(igBg = igBg? igBg :this.String().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + igBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true);
}
</style>
</head>
<body>
换成你的png图片
<div class="mypng">
<img src="icon_face_07.png" width="30" height="30" />
<img src="icon_face_10.png" width="30" height="30" />
<img src="icon_face_08.png" width="30" height="30" />
</div>
</body>
</html>
第 3 种方法:用JS实现,加上一段js代码后,所有插入的透明png自动透明了.(注意,这方法也是只对直接插入的图片有效,对背景图无效)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transpare
ncy in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var j=0; j<document.images.length; j++)
{
var img = document.images[j]
img文件如何打开var imgName = UpperCase()
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.outerHTML = strNewHTML
j = j-1
}
}
}   
}
window.attachEvent("onload", correctPNG);
</script>
<style type="text/css">
<!--
body {
background-color: #9999CC;
}
-->
</style></head>
<body>
把图片换成你自己的图片
<img src="img/icon_face_03.png" width="30" height="30" /><!--把图片换成你自己的图片 -->
<img src="img/icon_face_05.png" width="30" height="30" />
<img src="img/menu_title_over.png" width="130" height="36" />
</body>
</html>   
方法四
<script language="javascript">
// 修复 IE 下 PNG 图片不能透明显示的问题
function fixPNG(myImage) {
var arVersion = navigator.appVersion.split("MSIE");
var version = parseFloat(arVersion[1]);
if ((version >= 5.5) && (version < 7) && (document.body.filters))
{
var imgID = (myImage.id) ? "id='" + myImage.id + "' " : "";
var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : "";
var imgTitle = (myImage.title) ? "title='" + myImage.title  + "' " : "title='" + myImage.alt + "' ";
var imgStyle = "display:inline-block;" + myImage.style.cssText;
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + myImage.width
+ "px; height:" + myImage.height
+ "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>";
myImage.outerHTML = strNewHTML;
} }
}//
</script>
图片直接
处理的 解决方法
最近很多朋友反映不会做gif透明的logo,原因是logo有粗糙的描边,而png有些浏览器不兼容,今天我给大家讲下如何来制作 其实很简单!
有两种方法告诉大家
第一:给图像加外发光
1、双击所在图层 
2、选择外发光
3、调整发光颜为白 
4、确定导出就可以
第二:给图像加描边
1、选择描边
2、调整描边颜为白,
3、点击确认完成
补充教程
方法3
首先你用PS做好图片时,一定不要直接另存为gif,而是先把默认的RGB模式直接转换成索引模式
转换后会弹出一个框,依下面这个更改
最后保存就行了。
有整合PW论坛的,那个论坛logo是png透明背景的,也用这种方法保存,不然在IE下是有灰背的
看我下面这个logo是png的,透明背景的 
补充教程二
现在论坛站标基本上采用了png的格式图标 
使用PHOTOSHOP制作的时候
在PS里看到 图片制作不错
没有问题,但是要是导出PNG格式 就出现
或者论坛上面   
如何解决PNG 透明的问题呢。?
我们用到了两个工具 Photoshop 和 Imageready两个软件
首先使用photoshop制作一个图片
存储格式为PSD格式。
然后使用Imageready打开PSD文件   
打开文件后 imageready右上角有个优化
设置PNG8 下一步就开始把PSD文件到处 保存成PNG透明图片
按照下面的步骤进行   
文件---将优化结果储存为----然后保存文件png -----后面均为确定即可
把做好的LOGO替换论坛的LOGO 发现LOGO透明了。
-----------------------------------------------------------------------
IE6支持PNG透明的5种方法
方法一:PNG8格式
其实IE6与生俱来就支持png8的索引透明度,但不支持png或8位以上的 alpha 透明度。而对于非动画的GIF建议你使用PNG8,因为体积会更小。对于并不复杂的png透明图其实可以存储为png8,这样可以有效避免ie6不能显示png24的问题。
photoshop中:
png24转换成png8的具体方法为:文件-》存储为web和设备所用格式-》在“预设”里,选择“PNG-8”和“”透明度,保存即可。
方法二:IE PNG Fix v1.0 / 2.0 Alpha 2
使用简介:页面标签使用behavior:url(”iepngfix.htc”);来调用外部包含js、css的iepngfix.htc文件來修正PNG alpha 透明度。
iepngfix.htc的使用方法:
下载脚本脚本,将其中的iepngfix.htc和blank.gif解压缩到合适的目录内,.htc即Html Components,该文件需要在CSS中被调用;blank.gif是一个1×1像素的透明GIF图片,缺少该文件会使<img>标签插入的PNG图象显示为红的叉烧包。
在iepngfix.htc中修改blank.gif的路径,var blankImg =‘blank.gif的正确路径’,这是惟一一个需要修改的配置。
iepngfix.htc为IE6所用,以"_"hack作为区分
应用有PNG透明图片的标签,均要读取behavior:url("iepngfix.htc")
iepngfix方法在背景应用上只能做到background-image的效果, 背景重复坐标调用等暂时实现不了
透明png背景图片会以所在层的宽高度拉伸填充,border计算在层的宽高内
iepngfix.htc下载地址:
/iepngfix.htc
方法三:AlphaImageLoader 筛选器
使用简介:在每个标签样式中插入 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’scale’)
官方原文:support.microsoft/kb/294714/zh-cn
注意事项:
AlphaImageLoader难以实现插入图片<img src=".png"/>透明
AlphaImageLoader方法用于背景图片上,实现background-image的效果
AlphaImageLoader IE8不支持
因为IE7支持AlphaImageLoader,避免冲突建议使用CSS hack区分开,只针对IE6使用
官方原文:support.microsoft/kb/294714/zh-cn
方法四:PNG Transparency in IE
使用简介:相对来说比较简洁,使用一段包含滤镜的JavaScript 就可以模拟图片或背景 PNG alpha 透明度。
官方原文:codingforums/archive/index.php?t-80555.html
注意事项:
根目录的spacer.gif透明图片作为png图片的替换,写在JavaScript中的spacer.gif路径根据需要调整
PNGTransparncyinIE方法在背景应用上只能做到background-image的效果, 背景重复坐标调用等暂时实现不了
方法五:IE7/IE8 JavaScript library
使用简介:ie7/ie8-js是一个解决IE与W3C标准的冲突的JS库,使微软的IE的行为像一个Web标准兼容的浏览器,支持更多的W3C标准。
官方原文:le/p/ie7-js/
IE7.js及IE8.js这是一个JavaScript library可以你的IE浏览器符合标准,目前的版本是:version2.0 (beta);
IE7.js 给ie5,6用
让ie5,6 可以使用css2.0的语言,跟ie7;的效果一样,主要是标準化
IE8.js 给ie5,6,7用
让ie5,6,7 模拟IE8,使用上部分新的语言如CSS3.0
使用方式,在页面加如下JS:
IE7.js:
<!--[if lt IE 7]><script src="lecode/svn/version/2.0(beta)/IE7.js" type="text/javascript"></script><![endif]--> 注意事项:png图片必需要以-trans.png结尾,才能使用透明。如:shadow.png换成shadow-trans.png
PNGTransparncyinIE方法在背景应用上只能做到background-image的效果, 背景重复坐标调用等暂时实现不了
用法如下:
<img src="logo.png" width="328" height="325" border="0" onload="fixPNG(this)" />

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。