初學網頁設計的朋友可能都會碰到這樣的問題，需要在網頁插入一透明圖片。如果使用Gif格式的透明圖片，可能像素低，顯示不夠清晰。如果用PNG格式透明圖片，在IE6下將達不到透明效果，而是灰色的背景。這會讓你的網頁看上去非常醜陋，任何一個網頁設計師都不想出現這樣的問題，下面是一個小小的教程，教你如何讓PNG格式的透明圖片在IE6下同樣能夠正常顯示。
( Z4 ^# h4 |& f+ Z D4 H9 u9 X
. G; \/ Z: ^' l& w: O我們先來看看在透明PNG圖片在Mozilla Firefox和Internet Explorer 6中的顯示差異:5 H" m- ]4 ^$ l% `7 H
g W9 m6 G3 S0 Y( ]* x
Mozilla Firefox - I7 S# U8 v: k3 [0 x x# Q
: P& s- c8 v- E
PNG透明圖片在Mozilla Firefox下顯示良好。
# c. p, K3 V0 f4 ?7 _
3 X- V( E6 k P# _$ QInternet Explorer 6
' c1 y. [! A! @2 i& t$ f' z! `, v. I* g
在IE6中這張PNG圖片的背景卻是一片灰白,真的很難看，除非你的網頁背景色就是一片灰白 ( [" M( X) Z: ?' g7 s5 S! ]
. d7 H2 r% ^( y& ~解決方法
: t; t: k; a# H% v; w _ v7 Q, `8 l- Q# |. w, P3 t
首先，為你的圖片外套一個DIV層，像這樣:
$ g/ r, {; D2 d- I# U/ w
b& y X0 m/ L j$ |4 z<body> <div class=」flower」></div> </body>, z, t7 ?/ s4 C7 j* U* }" ?1 f, r8 J
3 S1 U; [5 m2 H然後，在CSS文件裡面寫入:- body {background-color:#000}
" F9 C. F# d; Z; g
, L" o& T2 w7 {0 C( x- div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}
- <!–[if gte IE 5]>
9 b) [+ B# G* ~ n5 I
) V/ ?, u8 ^; K r; d9 v: D: T: v: O% X- <style type="text/css">' v0 q1 O% C8 f+ N
- : K; z6 a3 L$ E2 z4 N5 Y m2 b. u
- div.flower {, ^) x/ Z: ]- U
0 H7 }# p7 E( O" p; e- background:none;
4 O( W" S2 @4 w9 W- Q
. L1 k& a5 y) Q- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=』flower.png』 ,sizingMethod=』crop』);5 F1 x: q |$ v# V
- 6 u! \& T9 e2 u* t, m6 y& H: _
- }8 n {) V4 L, d. Q) \
- B5 v9 U9 C7 B1 f
- </style>7 l" K+ f& e3 \( r0 r$ O5 J% S
! ]/ H/ H5 [- A! K0 V j" X- <![endif]–>
0 K- t2 N% }& Z8 }8 d) n7 f$ l8 @# Y |
|
發表於 2008-1-29 15:52:33
提升卡
沉默卡
变色卡
