初學網頁設計的朋友可能都會碰到這樣的問題，需要在網頁插入一透明圖片。如果使用Gif格式的透明圖片，可能像素低，顯示不夠清晰。如果用PNG格式透明圖片，在IE6下將達不到透明效果，而是灰色的背景。這會讓你的網頁看上去非常醜陋，任何一個網頁設計師都不想出現這樣的問題，下面是一個小小的教程，教你如何讓PNG格式的透明圖片在IE6下同樣能夠正常顯示。
* K3 {! l7 {7 J( a' w
6 m4 S$ c, b2 q6 A G我們先來看看在透明PNG圖片在Mozilla Firefox和Internet Explorer 6中的顯示差異:
, K. z* e$ o7 u
8 {* p$ z: R4 U1 \3 f. q! vMozilla Firefox
! \2 v3 `% b) `% W4 D$ S' m8 W9 r. P9 O8 X# f5 \ t
PNG透明圖片在Mozilla Firefox下顯示良好。0 j8 D1 H" q; m+ {
 $ A$ G3 F1 K6 C. F
Internet Explorer 6
+ W0 ]7 i/ S5 M
" x% y! i5 M% f- D) T9 A在IE6中這張PNG圖片的背景卻是一片灰白,真的很難看，除非你的網頁背景色就是一片灰白 6 R+ T8 o8 S; K. [- q+ T
9 x4 |* o+ p: h2 o j解決方法
! }, i' P) b/ b8 c( a3 Z9 k" R5 n* W
首先，為你的圖片外套一個DIV層，像這樣:; J+ E) V& g# F
* H0 J* `% J- M8 O
<body> <div class=」flower」></div> </body>
4 z' k* t# D4 }& t7 R8 A% @5 v
9 L& G- f" x' p" K: e然後，在CSS文件裡面寫入:- body {background-color:#000}
1 P- L8 W* c0 _) W$ d) M
! x! H4 I$ }3 t- n$ U. G5 [" s- div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}
- <!–[if gte IE 5]>
/ r9 T1 {; P3 G
# Y* O7 _. _2 [3 i7 u( n2 l- <style type="text/css"> C0 a- F" M3 e. m" V1 L' m/ x! p
, S I0 j1 M5 Y: K1 k- div.flower {
2 w# Q) W* }* z* ?6 s9 S% x8 V
. {) n; }! c5 A7 |9 D# q/ b0 I- background:none;
2 d) d4 x+ P) X
: v+ P* N" j+ t) u7 g7 A- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=』flower.png』 ,sizingMethod=』crop』);2 F3 g! y) [& f8 j8 H% q
: j+ c/ N0 J! h. O5 z# T6 \- }/ v1 Z: D) _+ E8 s
+ S4 d, S2 r% K$ k r/ T! ]( B4 {- </style>4 V& y3 M2 m5 e+ L; L+ w& @5 u3 i
- & R. f- h: x6 x, x* h0 L5 t/ C. A
- <![endif]–>
& d7 b7 v, {8 x$ I: d& S- P |
|
發表於 2008-1-29 15:52:33
提升卡
沉默卡
变色卡
