初學網頁設計的朋友可能都會碰到這樣的問題，需要在網頁插入一透明圖片。如果使用Gif格式的透明圖片，可能像素低，顯示不夠清晰。如果用PNG格式透明圖片，在IE6下將達不到透明效果，而是灰色的背景。這會讓你的網頁看上去非常醜陋，任何一個網頁設計師都不想出現這樣的問題，下面是一個小小的教程，教你如何讓PNG格式的透明圖片在IE6下同樣能夠正常顯示。
% C* A" I* h; T( U6 x! |5 B% I9 U4 a
我們先來看看在透明PNG圖片在Mozilla Firefox和Internet Explorer 6中的顯示差異:" U+ y' d1 l* Z! z" B8 c9 m
# L/ {# Q9 U, h/ N" d6 R" l+ NMozilla Firefox
) m0 l4 O9 _' D) B" Q1 }2 U
) G5 ?9 I" O8 {- M6 D' Z1 GPNG透明圖片在Mozilla Firefox下顯示良好。# B V1 V. ]. }" ~8 k5 [7 P+ B
0 t' J- B1 C" w1 f. ?- ]$ P0 IInternet Explorer 6
! ~! J \; c2 R$ E" V5 D% N! d) T* ]4 b! W1 [6 c; F
在IE6中這張PNG圖片的背景卻是一片灰白,真的很難看，除非你的網頁背景色就是一片灰白
: {! U! S3 v( Z8 s ( y) \# B6 V5 J1 ]9 g
解決方法 4 x$ G* c" E1 l3 K. l
' N# H- z3 Z2 C" ]9 R4 O& R
首先，為你的圖片外套一個DIV層，像這樣:
/ k0 l& ]* a- o8 O# f- J# d: G8 j _: l6 J: C5 U& ]
<body> <div class=」flower」></div> </body># |5 t' y$ c+ k% Y- ]! }% m
* D: u+ g# h( O* T
然後，在CSS文件裡面寫入:- body {background-color:#000}: [! D" L3 w0 `
4 h' W+ I) o" W. ?/ J0 G; `- div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}
- <!–[if gte IE 5]>9 b7 d' |2 G) O2 C3 {& B9 i& L
5 q" P* u+ a) Y1 w- <style type="text/css">
2 \- y" O3 X, l; l2 n
4 F( O6 O8 m# G% U- div.flower {# `! u4 I+ L/ ?. Y# q
0 y3 c: J _2 H, w( E/ X3 i) ^- background:none;) R; s9 @# B; ?( z9 W; L
- ! B& a6 p7 O. g! g K/ w9 m% R
- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=』flower.png』 ,sizingMethod=』crop』);
( q& [" C& ]9 C - & c# p) z3 Q, K1 J
- } }- M- Z, O& M" a) J4 z. ]
) Z. \# j' P" d- </style>& T5 `; I3 @9 i1 ^. I
- ( E9 N( `! p7 `: o3 F* ?) ?) G
- <![endif]–>
 |
|
發表於 2008-1-29 15:52:33
提升卡
沉默卡
变色卡
