首頁 > 開發者 > JavaScript

png在IE6 下無法透明的解決方案匯總

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

png在IE6 下無法透明的解決方案匯總

 　　解決PNG圖片在IE6下的透明這類問題Google上很多解決方案，屬於非常常見的問題，以前我做的時候，這類透明我都是用gif，而直接避開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樣式:

　　?

1

2

3

4

5

6

7

8

.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代碼：

　　?

1

2

3

4

5

<div class="png">

<div>

CSS 背景PNG透明 及 連結失效問題解決

</div>

</div>

　　/*

　　相容IE6.0、IE7.0、FF，

　　IE7.0和新版的FF其實是可以不加filter濾鏡直接透明的。

　　*/

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

　　方法一:定義一個樣式,給某個div應用這個樣式後，div的透明png背景圖片自動透明了。(注意兩處圖片的路徑寫法不一樣，本例中，icon_home.png圖片與html檔案在相同目錄)

　　?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!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相同的目錄

　　請勿大量使用，否則會導致頁面開啟很慢!!!)

　　?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<!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 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自動透明了.(注意，這方法也是只對直接插入的圖片有效，對背景圖無效)

　　?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

<!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 {

 

}

-->

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

　　方法四

　　?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<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)" />

　　

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More