png在IE6 下無法透明的解決方法總結_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

png在IE6 下無法透明的解決方法總結_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:58 PM

ie6 png 透明

FF和IE7已經直接支援透明的png圖了,下面這個主要是解決IE6下透明PNG圖片有灰底的

複製程式碼程式碼如下:

style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/fl.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(images/angel.png) no-repeat !important; 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src="images/angel.png");
background:none;
width:118px;height:133px;
}

.png div{position:relative;}

登入後複製

HTML程式碼：

<div class="png">
<div>
CSS 背景PNG透明 及 链接失效问题解决
</div>
</div>

登入後複製

/*
相容於IE6.0、IE7.0、FF，
IE7.0和新版的FF其實是可以不加filter濾鏡直接透明的。
*/

=============================================== ==============================

方法一:定義一個樣式,給某個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>

登入後複製

方法二: 為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&#63;this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1&#63;(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg&#63; 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>

登入後複製

方法三:用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) &#63; "id='" + img.id + "' " : "" 
       var imgClass = (img.className) &#63; "class='" + img.className + "' " : "" 
       var imgTitle = (img.title) &#63; "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 {

}
-->
</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) &#63; "id='" + myImage.id + "' " : "";
   var imgClass = (myImage.className) &#63; "class='" + myImage.className + "' " : "";
   var imgTitle = (myImage.title) &#63; "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>

登入後複製

用法如下：

複製程式碼程式碼如下:

以上所述就是本文的全部內容了，希望大家能夠喜歡。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7649

CakePHP 教程

1392

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT迷你填字遊戲答案

110

Related knowledge

如何在 Windows 11 上將 PNG 轉換為 JPG May 12, 2023 pm 03:55 PM

如何在Windows11上將PNG轉換為JPG在Windows10和11上，您可以使用Microsoft內建的Paint應用程式快速轉換圖片檔案。若要在Windows11上將PNG映像轉換為JPG，請使用下列步驟：開啟檔案總管並導航至要轉換的PNG映像。右鍵單擊圖像並從選單中選擇開啟方式>繪製。您的照片或圖像會在「畫圖」應用程式中開啟。注意螢幕底部的檔案大小。若要將檔案從PNG轉換為JPG，請按一下檔案並從選單中選擇另存為>JPEG圖片。當文件資源

解決win11透明工作列黑線問題的方法 Dec 22, 2023 pm 10:04 PM

很多朋友在使用translucenttb設定透明工作列之後，發現win11透明工作列有一條黑線，觀感非常難受，這時候該怎麼解決呢，其實在軟體裡就能解決。 win11透明工作列有一條黑線：方法一：1、根據使用者回饋，可以右鍵translucenttb，開啟設定。 2、然後將圖示選項的「margin」設定為「1」就可以解決了。方法二：1、如果或不行，可以右鍵空白處開啟「個人化」2、然後在其中選擇系統預設的主題更換即可解決。方法三：1、如果都不行，那麼建議大家卸載translucenttb。 2、然後更換

如何解決Win11工作列透明度有一條線條的問題？ Jan 29, 2024 pm 12:12 PM

許多的win11用戶們在系統的時候會將自己的任務欄設定成透明的，不過也有不少的用戶們在設定完了以後在任務欄上出現一條黑線，那麼這是怎麼回事？用戶可以利用第三方軟體來進行設定就可以了。以下就讓本站來為用戶們來仔細的介紹一下win11工作列透明有一條線條的解決方法吧。 win11工作列透明有一條線條的解決方法一：1、根據使用者回饋，可以右鍵translucenttb，開啟設定。 2、然後將圖示選項的margin設定為1就可以解決了。 2、然後在其中選擇系統預設的主題更換即可解決。

CSS怎麼設定透明 Nov 01, 2023 am 10:00 AM

CSS設定透明的方法有opacity屬性、rgba顏色值、background-color屬性、使用偽元素等。詳細介紹：1、opacity屬性，透過設定元素的opacity屬性來實現透明效果，此屬性的取值範圍為0到1，0表示完全透明，1表示完全不透明；2、rgba顏色值，透過設定元素的背景顏色或文字顏色為rgba顏色值來實現透明效果，rgba顏色值由紅色、綠色、藍色和透明度等等。

linux系統怎麼設定終端透明? Jan 07, 2024 am 10:21 AM

linux在終端機中執行指令時，為了難能看到其它的幫助文檔，例如pdf、網頁等，可以設定終端透明度，該怎麼設定呢？下面我們就來看看詳細的教學。。一、開啟視窗特效1、要為終端設定透明度，需要先開啟視窗特效，先點選工作列上的」控制中心「。 2、在控制中心中點選」顯示「。 3.在」顯示「中保證」開啟視窗特效」的按鈕是開啟的狀態。 4.另外，也可以使用快速鍵shift+win+tab鍵來快速開啟或關閉視窗特效。二、設定透明

讓win7工作列透明圖文教學 Jul 20, 2023 am 09:49 AM

今天，一群用戶問為什麼他們的電腦在重新安裝Windows7系統後沒有透明效果。事實上，這是你的電腦沒有及時更新顯示卡驅動，調整Windows7Aero主題造成的。您可以透過以下方式進行設定。 1.首先，您需要確保您的電腦安裝了一個新的顯示卡驅動您可以使用驅動精靈或360驅動大師在線更新顯示卡驅動器。。 2.面對桌面空白處，右鍵，選擇個人化並開啟。 3.在這裡找到Aero主題，然後選擇。正常情況下應該可以看到透明玻璃效果。你明白如何讓你的win7工作列透明圖形教學嗎？不會的同學，趕快操作吧。

如何重新命名資料夾內所有檔案的副檔名，包括子資料夾 Apr 14, 2023 pm 12:22 PM

假設您需要將檔案的副檔名從一個副檔名重新命名為另一個副檔名，例如jpg到png。這很簡單，當然！但是，如果您有多個需要更改擴展名的檔案怎麼辦？或者更糟的是，如果這些多個檔案也位於多個資料夾和子資料夾中，在一個資料夾中呢？好吧，對於一個普通人來說，這可能是一場噩夢。但對於一個極客來說，絕對不是。現在的問題是，你是不是極客。好吧，有了極客專頁的幫助，您絕對是！在本文中，我們透過批次腳本的方法解釋瞭如何輕鬆地重命名資料夾內所有檔案的副檔名，包括您選擇的子資料夾從一個副檔名到另一個副檔名。注意：

如何調整Win11工作列的透明度 Jan 01, 2024 am 11:17 AM

許多使用者都喜歡透明版的頁面，在win11系統下，使用者也可以透過一些方法來設定透明的任務欄，這樣操作和外觀看起來也會顯得更好看一些。 win11工作列怎麼設定透明1、點選開始選單，然後開啟微軟商店。 2、搜尋“TranslucentTB”，然後找到對應的進行下載。 3、點選這裡的安裝。 4.開啟以後選擇“desktop”，然後再點選“clear”就可以了。

See all articles

png在IE6 下無法透明的解決方法總結_javascript技巧

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題