初學網頁設計的朋友可能都會碰到這樣的問題,需要在網頁插入一透明圖片。如果使用Gif格式的透明圖片,可能像素低,顯示不夠清晰。如果用PNG格式透明圖片,在IE6下將達不到透明效果,而是灰色的背景。這會讓你的網頁看上去非常醜陋,任何一個網頁設計師都不想出現這樣的問題,下面是一個小小的教程,教你如何讓PNG格式的透明圖片在IE6下同樣能夠正常顯示。$ k% W2 V; z- x6 M' T: G, u, K o6 F
+ F8 r7 }8 z1 W' r: d
我們先來看看在透明PNG圖片在Mozilla Firefox和Internet Explorer 6中的顯示差異:2 Y O: \7 J% E. X
2 d+ n* a! p3 `2 h# d7 k, t
Mozilla Firefox
! B( Y4 T* t. R1 b* Y- R7 T2 K+ u# r4 H" S
PNG透明圖片在Mozilla Firefox下顯示良好。6 |: r, ]9 |% w0 k5 L/ P5 |5 R

0 Q; L) e5 \( i8 ZInternet Explorer 6
4 _5 B: m! v6 \' H& S
% ?, u9 S0 k1 n在IE6中這張PNG圖片的背景卻是一片灰白,真的很難看,除非你的網頁背景色就是一片灰白
( ?% A. {0 _: x
% ?' e% O( ?) P- b' M解決方法 $ v8 ] r# d$ @1 h: {( w
* }: a, a- _1 N1 C" ^
首先,為你的圖片外套一個DIV層,像這樣:
- ?! J7 x0 E5 A* ~8 N& ^5 M% {$ F! T- q: h+ J
<body> <div class=」flower」></div> </body>
; B; a* `6 S( ]. ?' o- E! [! E/ T
+ U' b S4 w2 w9 P$ K3 ?然後,在CSS文件裡面寫入:- body {background-color:#000}) Q) o6 U: e7 p7 M3 i) U7 s; i
- 7 N, e; w0 I' q; p& t! P
- div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}
複製代碼 呃,這是指Mozilla Firefox,要讓其在IE6下面正常顯示,你應該在<head>和</head>之間寫入:- <!–[if gte IE 5]>
6 V; Z9 ^' A n; X5 {. H3 Q7 m
0 ?, Z) W8 b* Z, p- <style type="text/css">
; h% Y p/ B$ A7 y) K2 p( R, @ - & N( Q! {! n+ @$ o( g5 P- E7 V
- div.flower {' f$ Q' c6 n7 S- `6 l" a# b
7 e! a: K5 O7 [! C7 R9 F+ |- background:none;
5 Q; U7 a6 A3 P, K$ M+ H9 c2 m - ) I' U1 ?8 s/ l, `$ u6 f( G
- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=』flower.png』 ,sizingMethod=』crop』);
. N" A" l9 P( a. V3 p0 C0 P - % |" l6 ^0 _( H
- }
& x% a- |- g+ X! f* C( a - , Z. q9 L: O) l: a1 V
- </style>
4 i3 y. L# @# X& c; O
8 K1 R+ I7 R+ N0 m3 C% c- <![endif]–>
複製代碼 這樣,就OK了,下面是加了上面代碼後的IE顯示圖:% v4 k% S( U* l1 i
 |
|