|
解决IE6下png透明失效的问题-IE6 png 透明 (四种解决方法)
有时需要在网页中用到一些透明背景图片，对效果要求不高的用GIF图片即可。但对于有透明度、阴影、发光等效果的，PNG图片就比GIF图片更有优势。但目前只有Firefox、Opera、IE7这三款浏览器对PNG图片支持得比较好，我们常用的IE6.0却不支持透明的PNG图片，因此要让PNG透明背景图片在IE6.0 中正确显示，只能在CSS里用滤镜来解决了。
下面倚天互联介绍这个主要是解决IE6下透明PNG图片有灰底的(相当不错 推荐)
=========== png图片 选择 png 32 格式能保持完美的半透明，或者投影效果 ===================
IE css滤镜中有一个使png背景透明的滤镜，JavaScript方法也是应用的这个滤镜实现png背景透明的。
写法：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../image /png_test.png’);
用法示例：
.png{background:url(../image/png_test.png);}
* html .png {_background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../image/png_test.png’);}
语法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true : 默认值。滤镜激活。
false : 滤镜被禁止。
sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
特性：
Enabled : 可读写。布尔值(Boolean)。参阅 enabled 属性。
sizingMethod : 可读写。字符串(String)。参阅 sizingMethod 属性。
src : 可读写。字符串(String)。参阅 src 属性。
说明：
在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。
实例：解决IE6下png透明失效的问题。
CSS样式:
.png{
_background: url(path/angel.png) no-repeat !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src="path/angel.png");
background:none;
width:118px;height:133px;
}
.png div{position:relative;}
HTML代码：
<div class="png">
<div>
CSS 背景PNG透明 及 链接失效问题解决
</div>
</div>
=============================================================================
第 1 种方法:定义一个样式,给某个div应用这个样式后，div的透明png背景图片自动透明了。
注意两处图片的路径写法不一样，icon_home.png图片与html文件在相同目录
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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;
background-repeat: no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png');
_ background-image: none;
}
-->
</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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.mypng img {
azimuth: expression_r(
this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency 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 = 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.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>
第四种方法，这个是刚才从网上找到的
在做WEB设计时最让人头痛的就是不同浏览器之间的显示差异，这一点尤其以IE6最让人深恶痛绝。最近就碰到一个非常让人头痛的问题，PNG在IE6下的透明效果失效。研究了差不多三天，终于不完美解决了这个问题。
W3C标准推荐使用PNG图片作为网页首选图像资源，但是漂亮、和谐而且有透明效果的PNG却在IE6下显示得一塌糊涂。为了解决这个问题查阅了很多资料，核心原理是使用IE独有的CSS样式中的behaviro属性，最终用如下方法解决：
1.下载iepngfix.zip，其中有三个文件：iepngfix.htc、iepngfix_tilebg.js、blank.gif，将这几个文件解压出来放到所需要使用png做为CSS背景的网站的根目录下。
2.假定一个div需使用png作为背景，标准的做法是：
#mydiv {
background:url(../img/main.png) no-repeat;
width:739px;
height:366px;
top:12%;
left:20%;
position:absolute;
}
此时该背景能在FF和IE7下正常显示，但是在IE6下会有恐怖的“灰边”。需要使用滤镜来解决。具体做法是使用上面提到的htc文件，在CSS样式的最后定义一个behaviro属性。新的的样式定义为：
#login_main {
background:url(../img/main.png) no-repeat;
width:739px;
height:366px;
top:12%;
left:20%;
position:absolute;
behavior: url("iepngfix.htc");
}
此时要注意url内的路径是相对于index.htm来说的，而不是相对于定义其样式的css文件。
3.在index.htm文件中需要引入上文中提到的第二个javascript文件，使用
<script language="javascript" src="iepngfix_tilebg.js"></script>
插入到<head></head>中
此时大功告成，使用IE6浏览index.htm文件看看效果，得意的笑吧。顺便提醒一句，对于普通IE6升级成IE7的XP用户，这两种浏览器是无法在同一个操作系统中共存的，笔者比较愚笨，使用了SUN的virtual box装了一个WIN2K3，幸好virtual box提供全屏和无缝模式，使得虚拟机用起来还是蛮流畅的。
优化：
方案一：可以发现，当需要用到的png图片比较多时IE6反应会有些迟钝，因为IE6每次加载需要透明的PNG时都会进行一系列的运算，将png中的alpha透明部分用blank.gif空白位图代替，可以想象这样的计算规模有多庞大。没办法，这是无法避免的，Vista 和IE7早就出来了，还有非常卓越的FF可供选择，使用IE6的客户所占的份额总会渐渐下降的。观察一下，此时使用IE7打开刚刚index.htm可以发现，本来非常完美而且不需要做任何改动的页面在IE7下也加载得特别慢，看来behaviro属性也影响到了IE7，让IE7也做了繁重的无用功。
此时我们的目标是将IE7解放出来，查阅各种浏览器的hack，发现只有IE6在CSS中能够认识下划线“_”，所以我们在刚刚的CSS样式中的behaviro前加上一个下划线。而这个下划线无论是FF或者IE7都是不会去解析的，这样IE7就会忽略这个CSS属性，既而解放了IE7。
方案二：既然此次处理的目标就是IE6浏览器，所以在首页中的JS加载语句也可以加上一个小小的改动，加上“<!--[if IE 6]><![endif]-->”标签，既而只针对IE6，而解放了其他浏览器，使它们在页面加载时就忽略iepngfix_tilebg.js这个文件，提高效率。而可怜的IE6，让它接受暴风骤雨般的CPU消耗吧，没办法，爱莫能助了。
|
相关推荐
易语言PNG图片透明背景源码例程程序结合易语言扩展界面支持库和应用接口支持库，调用API函数实现PNG图片作为窗口的透明背景。点评：本源码是易语言PNG图片的应用实例。 @易语言难学吗。
本文将深入探讨如何在易语言中处理PNG图片的透明背景，以及如何利用源码实现这一功能。 PNG（Portable Network Graphics）是一种支持透明效果的图像格式，其独特的 alpha 通道可以实现不同程度的透明度。在易语言中...
本教程将详细介绍如何在VC++项目中利用PNG图片作为窗口的底图，以实现漂亮的视觉效果。 首先，我们需要了解PNG图片的特点。PNG（Portable Network Graphics）是一种无损压缩的位图格式，支持透明度（Alpha通道），...
在C++Builder中，我们可以利用PNG图片的特性来实现窗体背景的半透明效果，并结合动画功能让图像如“两条鱼”在窗体上动态游动。以下将详细讲解实现这个效果所需的知识点： 1. **PNG图片格式**：PNG（Portable ...
在本主题中，我们将深入探讨如何实现背景透明的Static、Radio、CheckBox和GroupBox控件，并支持将PNG图片作为背景。这是一项高级的GUI定制技术，能够使应用程序的界面更加美观和独特。 首先，PNG图片格式因其支持...
这个滤镜是`progid:DXImageTransform.Microsoft.AlphaImageLoader`，它能够加载一个非透明的图片作为背景，并调整其透明度以匹配PNG图片的Alpha通道。 3. **动态加载图片**：`clear_png.js`会动态地创建一个`<img>`...
"七色小汽车图片，背景透明PNG图片"这个资源，显然是一组包含了多种颜色小汽车的PNG图像，每个图片的背景都是透明的，这对于设计师来说是一个非常实用的素材库。 PNG（Portable Network Graphics）格式是一种无损...
尽管PNG格式拥有诸多优点，但在早期版本的Internet Explorer（IE）浏览器中存在一个显著的问题：即不支持PNG格式图片的透明背景功能。具体来说，在IE 7及以下版本中，PNG图片无法正常显示其透明背景，而是呈现出一种...
标题提到的“易语言窗口png背景源码”就是利用易语言来实现窗口界面设置PNG图片作为背景的功能。 PNG（Portable Network Graphics）是一种无损压缩的位图格式，它支持透明度，并且文件体积相对较小，常用于网页设计...
"40张端午节透明背景PNG图片设计素材.rar"是一个专门为设计师和创意人员准备的资源包，它包含了与端午节相关的高清透明PNG图像。这个压缩包的目的是为了方便用户快速获取并应用到他们的设计项目中。 端午节是中国的...
总的来说，解决IE6下PNG图片背景不透明的问题需要对CSS滤镜有深入的理解，并且要灵活应对可能出现的各种兼容性问题。在现代浏览器广泛使用的今天，虽然IE6的问题逐渐减少，但了解这些历史遗留问题可以帮助我们更好地...
2. **找到PNG图片**：然后，脚本遍历页面上的所有元素，查找那些使用了PNG-24作为背景图片的元素。 3. **应用滤镜**：对于每个找到的元素，脚本会添加一个特定的CSS滤镜属性，例如`progid:DXImageTransform....
2. **设置窗口背景**：然后，利用易语言的“设置窗口背景图”命令，将读取到的PNG图像设置为窗口的背景。这个命令允许你在窗口创建后更改其背景，以达到动态改变界面的效果。 3. **处理透明性**：PNG图像支持Alpha...
要解决这个问题，我们需要使用Java编程语言来实现PNG图片的解码过程。Java作为一种跨平台的语言，拥有丰富的库和工具，可以处理各种类型的数据，包括图像处理。以下是一些关键知识点： 1. **读取IPA文件**：首先，...
“emoji IOS Android 素材 移动”这些标签进一步强调了这些PNG图片是作为设计素材，特别针对移动设备和跨平台应用。设计师和开发者可以利用这些素材来增强用户界面的互动性和表现力，使通信更加生动有趣。 在...
设计师常使用PNG图像作为按钮、图标或页面元素，特别是需要与背景融合或透明效果的地方。 8. **移动设备**：在移动应用开发中，PNG也常被用作应用程序的图形资源，包括启动图标、界面元素等，因为其文件大小适中，...
总结来说，HTC方式实现PNG图片背景透明并添加链接是一种较旧的技术，主要用于解决IE浏览器的兼容问题。随着Web技术的发展，现在有更先进的解决方案，如纯CSS和JavaScript。然而，了解这种历史方法可以帮助我们理解...
4. **CSS背景图像技巧**：一种技巧是使用checkerboard.gif（棋盘格背景图）和blank.gif（空图片）作为背景，通过定位和大小调整来模拟透明效果。这种方法适用于背景单一颜色的情况，但不够通用。 5. **双层背景法**...