生活随笔
收集整理的這篇文章主要介紹了
IE6 png背景图片显示不正常处理
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
http://xiaoboss.iteye.com/blog/1167829
現(xiàn)在web設(shè)計(jì)，畫面是越來越炫
但是使用了透明的背景圖，在IE6下，
在ie78 ff等瀏覽器顯示正常。
?解決辦法：
Html代碼 ?
body{?background-color:#CCC;}??一般普通寫法如下：??div.bg1{?background:url(logo.png)?no-repeat?center;width:100px;?height:100px;}??特殊處理寫法如下：??/**?Only?Used?For?IE?*/??*.bg2{filter:?progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,?sizingMethod=scale,?src="logo.png");?width:100px;?height:100px;}??/**?Only?Used?For?FF,Sa*/??html?>?body?.bg2{?background:url(logo.png)?no-repeat?center;width:100px;?height:100px;}?? ??
一下是html調(diào)用css寫法:
Html代碼 ?
<body>??????<div?class="bg1">test?content</div>??????<hr/>??????<div?class="bg2">test?content</div>??</body>?? ?
一下為ie7對比顯示，上面為一般寫法，可以發(fā)現(xiàn)ie6處理的不好。
下面為特殊寫法，可見比較完美。
分析：
?ie系列瀏覽器可以通過filter 屬性來設(shè)置背景圖，而filter屬性在除ie系列瀏覽器就不生效。
所以這里想到hack處理辦法。
?
IE系列自己特殊的css寫法可以通過*，*.bg2 這種css樣式只能在ie系列瀏覽器生效
同樣使用html > body .bg2，只有IE系列不生效的寫法。
這樣可以看出效果在ie ff等下都顯示正常
?
?
?案例1:定義一個樣式,給某個div應(yīng)用這個樣式后，div的透明png背景圖片自動透明了。（注意兩處圖片的路徑寫法不一樣，本例中，icon_home.png圖片與html文件在相同目錄）
?
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>無標(biāo)題文檔</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即自動透明了。（這方法只對直接插入的圖片有效，對背景圖無效）注意，要準(zhǔn)備一個透明的小圖片transparent.gif,大小不限。必須放在和html相同的目錄
請勿大量使用，否則會導(dǎo)致頁面打開很慢!!!)
?
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>無標(biāo)題文檔</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"):(thisthis.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實(shí)現(xiàn),加上一段js代碼后,所有插入的透明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>無標(biāo)題文檔</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?imgimgName?=?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????????????????jj?=?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>??????? ?案例4：
?
Html代碼 ?
<script?language="javascript">??//?修復(fù)?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.οnlοad=function(){???????????document.getElementById("top").style.height=screen.height/5+"px";????????????}//??</script>?? ?
用法如下：
<img src="logo.png" width="328" height="325" border="0" οnlοad="fixPNG(this)" />
?
以下是微軟官方提供的解決方法:
Js代碼?
??function?fixPng()?{????var?arVersion?=?navigator.appVersion.split("MSIE")????var?version?=?parseFloat(arVersion[1])??????if?((version?>=?5.5?&&?version?<?7.0)?&&?(document.body.filters))?{??????for(var?i=0;?i<document.images.length;?i++)?{????????var?img?=?document.images[i];????????var?imgName?=?img.src.toUpperCase();????????if?(imgName.indexOf(".PNG")?>?0)?{??????????var?width?=?img.width;??????????var?height?=?img.height;??????????var?sizingMethod?=?(img.className.toLowerCase().indexOf("scale")?>=?0)??"scale"?:?"image";???????????img.runtimeStyle.filter?=?"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"?+?img.src.replace('%23',?'%2523').replace("'",?"%27")?+?"',?sizingMethod='"?+?sizingMethod?+?"')";??????????img.src?=?"images/blank.gif";??????????img.width?=?width;??????????img.height?=?height;??????????}????????}??????}????}????fixPng();?
轉(zhuǎn)載于:https://www.cnblogs.com/zhp404/articles/3974913.html
總結(jié)
以上是生活随笔為你收集整理的IE6 png背景图片显示不正常处理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
