完美解決IE中PNG格式透明背景圖片顯示異常的各種方法【Z】
NG半透明背景圖片效果
PNG圖片在網頁設計中扮演著一個很重要的角色，利用PNG圖片的特點可以製作出實用,絢麗的效果，可是對於PNG圖片的支援卻不是很理想，Firefox和Opera對PNG支援的比較好，特別是Firefox瀏覽器。可是IE卻不理PNG,使得設計者無法很隨意的使用png圖片。
IE5.5+的 AlphaImageLoader濾鏡為通向png提供了一個道路，如果他載入的是PNG(Portable Network Graphics)格式，則0%-100%的透明度也被提供。我們就利用這個濾鏡和hack來設計一個半透明png背景圖片的模型。
經過多方面的實驗比較了2種方法：css控制和js控制。總結如下：
css中鑲入如下程式碼控制：
#png{background-image:url(images/jzz_02.png) no-repeat !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true", sizingMethod="scale", src="images/jzz_02.png");
background:none;}
比較累，需要一個個新增程式碼。而且用了濾鏡後背景圖片不支援background-position定位
具體程式碼：
//總css檔案 style.css
#png{
background:url(image.png) no-repeat center !important;
}
//CSS程式碼中鑲入ie6配置CSS配置檔案 ie6.css
#png{
background:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png',enabled='true', sizingMethod='scale');
}
//html格式
<head>
...
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link href="ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
...
注：style.css檔案裡的圖片url是相對於css檔案的路徑，ie6.css檔案裡src是相對於html檔案的路徑
JS控制：
比較方便，適合懶人- -！，但bug比較多，效率相對於css要低
比較常用的js程式碼：
1.
correctpng.js
// JavaScript Document
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
}
}
}
function alphaBackgrounds(){
var rslt = navigator.appVersion.match(/MSIE (d+.d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
for (i=0; i<document.all.length; i++){
var bg = document.all[i].currentStyle.backgroundImage;
if (bg){
if (bg.match(/.png/i) != null){
var mypng = bg.substring(5,bg.length-2);
//alert(mypng);
document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='crop')";
document.all[i].style.backgroundImage = "url('')";
//alert(document.all[i].style.filter);
}
}
}
}
html
<head>
...
<script type="javascript" src="correctpng.js"></script>
<!--[if IE 6]>
<script>
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
window.attachEvent("onload", correctPNG);
window.attachEvent("onload", alphaBackgrounds);
}
</scrpit>
<![endif]-->
</head>
注 這個js方法不支援重複背景，如果背景重複的話就只能顯示一個，別的都支援。
2.
使用先人寫好的iepngfix類
這個類裡面有3個檔案
blank.gif替換為空白的圖片
iepngfix.htc核心檔案
iepngfix_tilebg.js貌似是控制重複背景的檔案，不過我用了以後直接頁面都顯示不出- -!
具體用法：
在css檔案里加入
img,div{
behavior: url("iepngfix.htc") ;
}
在html裡head之間呼叫iepngfix_tilebg.js
注意最好blank.gif和htc檔案放一個資料夾裡 習慣都放在image資料夾裡
總結：我個人認為使用css檔案會比較好點，這對程式美觀度和效率都會有一定的提高。
總結完畢。
==================================================================
另外的方法
新建一個叫png_fix.css的檔案，內容如下：
* html img,* html .png {
behavior: expression(( this.runtimeStyle.behavior = "none") &&(
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 =
"image/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 )
);
}然後在HTML檔案的<LINK>部分加入<> 最後自己做一個1×1畫素的透明gif圖片，存為transparent.gif。 使用的時候是這樣： 1、如果是在HTML裡面直接插入的PNG圖片，就直接會處理掉； 2、如果是在css裡面寫的用作背景的圖片，需要在
<!--[if gte IE 5.5000]><script type="text/javascript" src="js/pngfix.js"></script><![endif]-->
pngfix.js檔案的程式程式碼
{
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);
相關文章
- IE10與IMG圖片PNG顯示不了 WP中的WebBrowser中無法檢視PNG格式的圖片IE10Web
- IE6png圖片實現半透明的方法
- QT使用scrollarea顯示圖片，完美解決方案QT
- PNG圖片格式詳解
- 想把圖片當背景，但是其他控制元件背景設為透明色後，顯示的是背景顏色的問題解決控制元件
- 解決Win7 軟體圖示不顯示--Win7圖示異常，快捷方式不顯示解決方法Win7
- qt標題，解決title的png圖片scaled後顯示有明顯鋸齒QT
- IE6下Png透明最佳解決方案(推薦) Unit PNG Fix
- 小程式button背景顯示圖片
- java 電子印章 png 透明圖片Java
- win10桌面圖示排列顯示異常怎麼辦_win10桌面圖示顯示不正常的解決方法Win10
- ie9不顯示flash的解決方法IE9
- win10系統png格式不顯示縮圖如何解決Win10
- Overleaf中插入pdf圖片只顯示圖片路徑的解決方式
- ASP:Menu 在IE8中顯示不正確的解決方法
- discuz7.2不能顯示驗證圖片的解決方法
- GD 庫 PNG 透明底圖片新增文字及圖片水印
- 網頁圖片不能顯示 網頁圖片顯示不出來的解決辦法網頁
- 解決ie6/7/8iframe背景透明的問題
- win7圖片只顯示圖示不顯示預覽圖解決方案Win7圖解
- ImageView顯示圖片資源的兩種方法（background／src）View
- 用PHP處理png圖片白色背景色改為透明色的例項程式碼PHP
- CSS中背景圖片定位方法CSS
- 第四章 載入並顯示PNG圖片
- win10資料夾圖示不正常顯示怎麼辦_win10電腦資料夾圖示顯示異常的解決方法Win10
- RxJava 異常時堆疊顯示不正確？解決方法都在這裡RxJava
- Spring10種常見異常解決方法Spring
- 常見的幾種IE6 BUG及其解決的方法
- 聊一聊幾種常用web圖片格式：gif、jpg、png、webpWeb
- Picasa相簿圖片不顯示的解決辦法
- Java 將PDF轉為透明背景的圖片Java
- Torch7平臺上顯示圖片的幾種方法
- 顯示對話方塊,同時半透明顯示背景Activity
- c#圖片生成png格式和原圖不同C#
- win10桌面快捷方式圖示異常怎麼解決_win10快捷方式圖示顯示異常一招修復Win10
- Activity背景顯示app圖示APP
- 002.01 圖片移除背景成PNG檔案
- javaWeb常見異常的解決方法JavaWeb