解决IE6下png透明失效的问题
第 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;/* 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” “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(
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>
<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>
方法四
<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;
} }
window.onload=function(){
document.getElementById(“top”).style.height=screen.height/5+”px”;
}//
</script>
用法如下：
<img src=”logo.png” width=”328″ height=”325″ border=”0″ onload=”fixPNG(this)” />
103 responses to "解决IE6下png透明失效的问题"
17:38 on 九月 7th, 2011
this text assist me to come out a few ideas to help me make my very own time table for my complete time internet business.
10:18 on 九月 8th, 2011
that is interesting concerning the associate marketing. do you do any direct advertising or promoting on your site?
14:35 on 九月 8th, 2011
Hi there Guru, what trap you to put up an article. This article was extremely attention-grabbing, especially on account that I was looking for ideas in this topic last Thursday.
17:23 on 九月 9th, 2011
Your blog is so informative … keep up the good work!!!!
18:42 on 九月 9th, 2011
I want getting over a damaged coronary heart might be really easy as following a few steps.. however its no longer…
4:57 on 九月 10th, 2011
As long as Bud Adams is among NFL owners, this stuff will always be here.
7:03 on 九月 10th, 2011
http://bethanybeachvacationrentals.wordpress.com/ vacation rentals Bethany beach
6:03 on 九月 12th, 2011
I think that Blog, RSS and E-mail marketing are just different channels prevail the prospective customer.
23:37 on 九月 12th, 2011
Good post! GA additionally be my greatest earning. Nonetheless, it’s now not a much.
13:13 on 九月 14th, 2011
Thanks for writing a few very related topic. Such a lot tenderfoot marketers nowadays advertise and offer and sell whatever they can without even having a concrete concept of what things to prioritize. Hold them coming!
15:17 on 九月 14th, 2011
As a Newbie, I’m at all times looking online for articles that may help me. Thank you
22:10 on 九月 14th, 2011
link building service why seo backlinks back link
20:16 on 九月 19th, 2011
I must admit this post is very wonderful . Thanks once again for the push!
20:13 on 九月 20th, 2011
What a great story thank you very much for sharing with us.
15:53 on 九月 21st, 2011
I don’t see a lot effect on my gross sales at the moment. The exact is that, i used to be now not depending on adsense. I situated my weblog to sell something which i manufacture. So, they money coming in from sales.
11:52 on 九月 22nd, 2011
Interesting article. Have been did you bought all the information from…
22:32 on 九月 22nd, 2011
Hiya webmaster I really like your put up ….
0:41 on 九月 23rd, 2011
Implausible article as always, I am severely considering something along the strains of an associate part alone website… so very timely post.
15:17 on 九月 25th, 2011
keyword service black hat seo google check rank backlink service
5:18 on 九月 26th, 2011
I have now not drawn the weblog review yet. lengthy as you stay subscribed, you’ll be in with an opportunity to win a overview weekly!
14:57 on 九月 26th, 2011
VRy fascinating to learn it
14:42 on 九月 27th, 2011
I still don’t feel the affects on the internet… real life – one hundred% affected
16:02 on 九月 27th, 2011
Thank you so much for this data … I’m already doing a few of these strategies but quite a bit others which can be new to me.
3:39 on 九月 28th, 2011
Thank you for writing a few very related topic. Most tenderfoot marketers these days promote and offer and sell whatever they will without even having a concrete concept of what issues to prioritize. Preserve them coming!
6:56 on 九月 29th, 2011
This is a great useful resource for anybody who blogs!!
15:07 on 九月 29th, 2011
Very wise query, remark and an answer from which, I’ve discovered one thing today.
12:43 on 九月 30th, 2011
The whole you mentioned is correct, but there are numerous upsides. Like, ready to’t be fired.
7:41 on 十月 3rd, 2011
Thanks for the information, I want to give attention laptop restore tips for my blog however didnt know the place to start.
14:54 on 十月 3rd, 2011
I normally don’t submit in Blogs but your blog forced me to, superb work.. beautiful …
0:40 on 十月 4th, 2011
In searching for sites related to webhosting and specifically comparison internet hosting linux plan internet, your website came up.
2:23 on 十月 5th, 2011
the very best concept is 100% content. Use content material if you do your promotions. You’ve probably seen in this weblog at any time when I do a weblog post that pretty much simply recommends a product or service, all the time just a few folks don’t like that.
11:52 on 十月 6th, 2011
To build credibility merely be evidence of your own hype and provides individuals worth time and again again. Help others to achieve what they want to, and you turn into credible in their eyes.
19:55 on 十月 6th, 2011
Hey to all
I can’t perceive approach upload your website in my rss reader. Assist me, please
7:28 on 十月 7th, 2011
Thank you for your help!
6:16 on 十月 10th, 2011
almost more than half of the ideas work for me ! yippy, i had a rise of 2000 visitors in two days !
1:54 on 十月 11th, 2011
might clearly so much to learn about this. I think you made a few good factors in Features also.
13:07 on 十月 12th, 2011
It sounds such as you’re growing issues your self by way of attempting to unravel this situation instead of looking at why their is a problem in the first place
6:01 on 十月 13th, 2011
Do you do all your personal writing? Or do you outsource a few of it? I’m on the lookout for some similar content material for my weblog! These are nice posts!
17:14 on 十月 13th, 2011
I don’t normally respond to posts however I will in this case.
3:58 on 十月 14th, 2011
Ya know, that is going to be fairly interesting. Seeing how this weblog grows from 50 uniques a day to x,xxx+ (expectantly
).
9:48 on 十月 17th, 2011
thanks !! very useful post!
12:29 on 十月 17th, 2011
yea good Paintings
7:54 on 十月 18th, 2011
There is clearly loads to know about this. I think you made some just right points in Features also.
5:27 on 十月 19th, 2011
Hello webmaster I really like your put up ….
0:19 on 十月 21st, 2011
Once I don’t have an concept to blog, I cleanup my folders in my PC and do defragmentation in my system…
10:39 on 十月 21st, 2011
:O So mush Info :O … THis Is he MOst AMAzing SIte DUDe…
6:36 on 十月 24th, 2011
Im just getting started down this road, the journey goes to be long, however my target is two years to have a full time revenue online and to have the opportunity spend more time with my household as an alternative of going for a nine to five job..
14:28 on 十月 24th, 2011
Though operating a business sounds cool and all that. However in reality, I think it’s important kind a schedule so that you don’t get too involved. I favored that things you talked about “existence is stability”. Maybe hiring somebody do your work is a brilliant idea.
4:27 on 十月 25th, 2011
I trust that 100%! Motion makes things happen. No person ever discovered to stroll with out taking the primary step.
13:13 on 十月 26th, 2011
To start earning money together with your blog, to begin with use Google Adsense but gradually as your traffic increases, hold including increasingly money making packages in your site.