第 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]
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") led光源模组
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);
tvc转换器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)" />
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议