IE6png透明三种解决方法

相关推荐

IE6png透明三种解决方法

ecshop模板堂(http://www.oh100.com)

FF和IE7已经直接支持透明的png图了,下面这个主要是解决IE6下透明PNG图片有灰底的

第 1 种方法:定义一个样式,给某个div应用这个样式后，div的透明png背景图片自动透明了。（注意两处图片的路径写法不一样，本例中，icon_home.png图片与html文件在相同目录）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.oh100.com"> <html xmlns="http://www.oh100.com">

<head>

<title>无标题文档</title>

<!--

.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>

</body>

</html>

第 2 种方法: 给img定义样式，页面上所有透明png即自动透明了。（这方法只对直接插入的图片有效，对背景图无效）注意，要准备一个透明的小图片transparent.gif,大小不限。必须放在和html相同的目录

请勿大量使用，否则会导致页面打开很慢!!!)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.oh100.com">

<head>

<title>无标题文档</title>

.mypng img {

azimuth: expression(

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>

《IE6png透明三种解决方法》全文内容当前网页未完全显示，剩余内容请访问下一页查看。

<body>

换成你的png图片

</div>

</body>

</html>

第 3 种方法:用JS实现,加上一段js代码后,所有插入的透明png自动透明了.（注意，这方法也是只对直接插入的图片有效，对背景图无效）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.oh100.com">

<head>

<title>无标题文档</title> = +

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=\'"

sizingMethod='scale');\"></span>" + img.src + "\',

img.outerHTML = strNewHTML

《IE6png透明三种解决方法》全文内容当前网页未完全显示，剩余内容请访问下一页查看。

j = j-1

}

window.attachEvent("onload", correctPNG);

</script>

<!--

body {

background-color: #9999CC;

}

-->

</style></head>

<body>

把图片换成你自己的图片

<img src="img/icon_face_03.png" width="30" height="30" /><!--把图片换

成你自己的图片 -->

</html>

【ECSHOP模板堂出品】

解决ie6png透明的方法小结2017-03-22 13:45 | #2楼

png格式比起gif来表现色彩更丰富，特别是表现渐变以及背景透明的渐变要比gif格式出色很多，目前，最新的浏览器基本上都支持png格式。

（1）使用ie特有的expression

.pngimg { background:url(image.png); _background:url(image.gif);}

原理：上文的_号，目前ie7,8以及firefox浏览器等都不支持此css语法，只有ie6识别。因此，其他浏览器会调用png，而ie6刚调用gif。

（2）滤镜filter解决ie6下背景灰

style="filter: progid:dximagetransform.microsoft.alphaimageloader(src=images/fl.png')"

【

microsoft.alphaimageloader是ie滤镜的一种，其主要作用就是对图片进行透明处理。其属性有：

enabled : 可选项。布尔值(boolean)。设置或检索滤镜是否激活。true | false true : 默认值。滤镜激活。false : 滤镜被禁止。

sizingmethod : 可选项。字符串(string)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。

（image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。scale : 缩放图片以适应对象的尺寸边界。src : 必选项。字符串(string)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用）

src : 可读写。

缺陷：ie6下背景无法平铺，这个问题很严重。同时在性能上也有小问题，页面中次数不是很多的时候该办法还是可行的。

alphaimageloader滤镜会导致该区域的链接和按钮无效，解决的办法是为链接或按钮添加：position: relative;这样条代码，使其相对浮动。alphaimageloader无法设置背景的重复，所以对图片的切图精度会有很高的精确度要求。

】

【

实例：

.png{

_background: url(http://www.oh100.com) no-repeat !important;

filter: progid:dximagetransform.microsoft.alphaimageloader(enabled=true, sizingmethod=noscale, src="http://www.oh100.com");

background:none;

width:118px;height:133px;

}

.png div{position:relative;}

html代码：

<div>

css 背景png透明及链接失效问题解决

</div>

】

（3）利用js解决html中的img(插入在网页中的png图像)png背景灰问题

原理：原理同上，只是将img标签用<span>标签替换掉，并且通过滤镜设置该<span>标签的background。它会将所有插入的png都如此处理。注意的是这方法也是只对直接插入的图片有效，对背景图无效。

修复ie下图片不能透明显示的问题：

<!--[if ie 6]>

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='" + img.src + "', sizingmethod='scale');\"></span>";

img.outerhtml = strnewhtml;

i = i-1;

}

window.attachevent("onload", correctpng);

</script>

<![endif]-->

（4）调用iepngfix.htc解决ie6png背景灰及拉伸问题

此方法来自：http://www.oh100.com 此方法基于winodws平台，在linux下不支持htc,没有验证过，但有网友发文证实。

以下片段添加至css文件

<div class="pngimg">png背景图片</div> <img src="png图片" class="pngimg" alt="">

详细的应用方法这里就不介绍啦。

在必须使用png的情况下，这种方法应该是比较优秀的，虽然不能完美的解决ie6的平铺，但是至少是实现了拉伸，使得很多情况下可以代替平铺来使用。当然效率的问题任然是存在

（5）让“块”透明的方法

.div { filter: alpha(opacity=20); moz-opacity: 0.2; opacity: 0.2;}

测试ie6,ie7,ie8,ff2,ff3均通过。提示：ie6,ie7需设置一个宽度(100%也行)，否则看不到效果。

（6）dd_belatedpng,解决ie6不支持png绝佳方案

整个互联网上解决这个ie6的透明png的方案也是多不胜数,从使用ie特有的滤镜或是expression,再到javascript+透明gif替代.但是这些方法都有一个缺点,就是不支持css中backgrond-position与 background-repeat.

而我今天介绍dd_belatedpng,只需要一个理由,就是它支持backgrond-position与background-repeat.这是其他js插件不具备的.同时dd_belatedpng还支持a:hover属性,以及<img>.

看demo: http://www.oh100.com

原理

这个js插件使用了微软的vml语言进行绘制,而其他多数解决png问题的js插件用的是alphaimageloader滤镜.

使用方法

/files/aking/解决ie6透明png.rar

1.在这里下载dd_belatedpng.js文件.

http://www.oh100.com

2.在网页中引用,如下:

<!--[if ie 6]>

3.有2种调用函数,一种是dd_belatedpng.fix(),如上代码.另一种是fix(),这中方法需要在函数内指出css选择器名.

使用a:hover请留意

5-25 更新:如果你也像jutoy同学一样想要用透明png作为a:hover时的背景图片,那么你需要留意你的代码,需要以”a:hover”来作为选择器. 否则可能会导致无法成功.同时我也更新了demo,请需要的更新查看.接着我们看看正确的代码:

<!--[if ie 6]>

<![endif]-->

（7）通过 javascript 和 css 滤镜解决 ie 整站 png 背景透明问题 <script type="text/javascript" language="javascript">

function enablepngimages()

{ var imgarr = document.getelementsbytagname("img");

for(i=0; i<imgarr.length; i++){

if(imgarr[i].src.tolowercase().lastindexof(".png") != -1)

{

imgarr[i].style.filter = "progid:dximagetransform.microsoft.alphaimageloader(src='" + imgarr[i].src + "', sizingmethod='auto')";

imgarr[i].src = "spacer.gif";

}

if(imgarr[i].currentstyle.backgroundimage.lastindexof(".png") != -1)

{

var img = imgarr[i].currentstyle.backgroundimage.substring(5,imgarr[i].currentstyle.backgroundimage.length-2);

imgarr[i].style.filter = "progid:dximagetransform.microsoft.alphaimageloader(src='"+img+"', sizingmethod='crop')";

imgarr[i].style.backgroundimage = "url(spacer.gif)";

}

function enablebgpngimages(bgelements)

{

for(i=0; i<bgelements.length; i++)

{

if(bgelements[i].currentstyle.backgroundimage.lastindexof(".png") != -1)

{ //alert(bgelements[i]);

var img = bgelements[i].currentstyle.backgroundimage.substring(5,bgelements[i].currentstyle.backgroundimage.length-2);

bgelements[i].style.filter = "progid:dximagetransform.microsoft.alphaimageloader(src='"+img+"', sizingmethod='crop')";

bgelements[i].style.backgroundimage = "url(spacer.gif)";

}

</script>

<!--[if lt ie 7]>

var bgelements; enablepngimages(); if(bgelements){ enablebgpngimages(bgelements); }

</script>

<![endif]-->

.pngimg {behavior: url(iepngfix.htc);}

以下片段添加至html文件一.ie6使用gif，其他则使用png来解决png背景灰

【IE6png透明三种解决方法】相关文章：

薪酬制度透明化05-19

dedecms5557后台登陆验证码不正确的三种解决方法09-22

邮件乱码解决方法09-22

错误711的解决方法09-22

铸件缺陷及解决方法03-07

explorerexe错误的解决方法09-22