如何讓PNG格式的透明圖片在IE6下正常顯示

顯示全部樓層 · 發表於 2008-1-29 15:52:33

初學網頁設計的朋友可能都會碰到這樣的問題，需要在網頁插入一透明圖片。如果使用Gif格式的透明圖片，可能像素低，顯示不夠清晰。如果用PNG格式透明圖片，在IE6下將達不到透明效果，而是灰色的背景。這會讓你的網頁看上去非常醜陋，任何一個網頁設計師都不想出現這樣的問題，下面是一個小小的教程，教你如何讓PNG格式的透明圖片在IE6下同樣能夠正常顯示。

我們先來看看在透明PNG圖片在Mozilla Firefox和Internet Explorer 6中的顯示差異:

Mozilla Firefox

PNG透明圖片在Mozilla Firefox下顯示良好。

Internet Explorer 6

在IE6中這張PNG圖片的背景卻是一片灰白,真的很難看，除非你的網頁背景色就是一片灰白

解決方法

首先，為你的圖片外套一個DIV層，像這樣:

<body> <div class=」flower」></div> </body>

然後，在CSS文件裡面寫入:

body {background-color:#000}
$ [7 O' T+ B) ?' h7 N( q/ g$ x
. p7 Z- H" Y! p8 l: m4 H
div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}

複製代碼

呃，這是指Mozilla Firefox,要讓其在IE6下面正常顯示，你應該在<head>和</head>之間寫入:

<!–[if gte IE 5]>
- E, A" W, e8 {
4 f7 P P3 L0 `0 {$ ~; ^
<style type="text/css">
5 n9 ]& i- \4 D
! A8 c4 ?4 Y& A2 c0 p; t
div.flower {
& }$ y/ V s8 d. h/ A3 I- h8 ]; d
7 U! i% S1 S% w* t$ {$ y" y: ]& B
background:none;: v/ J( C$ y+ |* i Z
8 o: h6 S8 N' s; h* k, j- h* M
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=』flower.png』 ,sizingMethod=』crop』);
# D5 W0 B5 X3 @3 t
+ ^+ e6 P' p. N4 S
}" s2 t: {/ |7 G
. B) z+ m2 o. }/ W* F
</style>+ ^1 L- ?# z# S* a' Z1 _
* I! l, H/ q: s# B& Y8 w$ }0 }
<![endif]–>

複製代碼

這樣，就OK了,下面是加了上面代碼後的IE顯示圖:

顯示全部樓層 · 發表於 2008-1-30 03:08:13

		自動登錄	找回密碼
密碼			免费注册

如何讓PNG格式的透明圖片在IE6下正常顯示

相關帖子

瀏覽過的版塊