初學網頁設計的朋友可能都會碰到這樣的問題，需要在網頁插入一透明圖片。如果使用Gif格式的透明圖片，可能像素低，顯示不夠清晰。如果用PNG格式透明圖片，在IE6下將達不到透明效果，而是灰色的背景。這會讓你的網頁看上去非常醜陋，任何一個網頁設計師都不想出現這樣的問題，下面是一個小小的教程，教你如何讓PNG格式的透明圖片在IE6下同樣能夠正常顯示。
8 K0 ]. \1 {$ J) _! k3 G, r6 k* [" O
我們先來看看在透明PNG圖片在Mozilla Firefox和Internet Explorer 6中的顯示差異:( f( E! k$ d% D, Y# l" O& }$ O8 g
7 T& s" s3 a9 [. D
Mozilla Firefox
+ Q4 Z2 _" I! h- {, Y$ t Y+ G0 T
- d: \% M3 s; m4 IPNG透明圖片在Mozilla Firefox下顯示良好。' o2 {( w0 d$ Q( ^: ~
 1 a8 J) U1 ]" R( {. L- t+ K$ ^
Internet Explorer 6 + F0 X9 B t7 B X! B
5 a) b: m& k* N* q9 S! o在IE6中這張PNG圖片的背景卻是一片灰白,真的很難看，除非你的網頁背景色就是一片灰白 ! ~$ q3 Q: L7 Z, v, P( {5 t* j
 & U0 z2 j: X9 P( X* T: P2 F3 U
解決方法 , p1 u4 V& Q! c& \$ G) r
# N: F/ L/ u! L) D
首先，為你的圖片外套一個DIV層，像這樣:
0 x C/ V2 S4 V# |1 w
- F1 Q. B; T. y! j. r7 c- i0 S<body> <div class=」flower」></div> </body>
$ f$ V7 |7 }( T/ m; K7 ?0 _( n% {9 l \
然後，在CSS文件裡面寫入:- body {background-color:#000}/ h$ J; a! l' F$ }
, q" }) V, F' Z1 e8 c* w: I3 a- div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}
- <!–[if gte IE 5]>7 R5 B5 r( I: s8 Y9 H6 P4 k
% q* A* }/ y! O$ n. ^; r6 W- <style type="text/css">: f. j7 \ |6 N8 I
) _2 e! d4 n' m; h3 P. K- div.flower {$ E/ [: | P' S& H
- 7 Q" g+ E# s2 e' p2 g% O* m
- background:none;0 I( T! _$ u* R6 f9 H1 z" o
- & S; ^0 C! c5 F6 ]2 k. M
- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=』flower.png』 ,sizingMethod=』crop』);
5 T9 r9 ]3 p) Z0 X5 }0 o: M
, O& ?, E& t9 L# G c; I- }
1 a( x T; K. n1 d/ O8 }* P - 2 X4 @. |: R7 R2 `% z4 i& B
- </style>
2 N( ]* d* x' r* n$ _9 V1 X) e - - N: j M9 V& B: Z
- <![endif]–>
* m7 n6 R- l5 F; G6 B% ?3 W, ] |
|
發表於 2008-1-29 15:52:33
提升卡
沉默卡
变色卡
