初學網頁設計的朋友可能都會碰到這樣的問題，需要在網頁插入一透明圖片。如果使用Gif格式的透明圖片，可能像素低，顯示不夠清晰。如果用PNG格式透明圖片，在IE6下將達不到透明效果，而是灰色的背景。這會讓你的網頁看上去非常醜陋，任何一個網頁設計師都不想出現這樣的問題，下面是一個小小的教程，教你如何讓PNG格式的透明圖片在IE6下同樣能夠正常顯示。( a- M+ k# g# j5 A9 N* w
9 N" g2 K1 i+ z% o/ w, `我們先來看看在透明PNG圖片在Mozilla Firefox和Internet Explorer 6中的顯示差異:; } B W- }1 E) ]) ]
i. {" [; ?/ k" d8 }
Mozilla Firefox , C/ `0 l& V6 u3 H1 x; ]
$ {- O% e% t& C9 v+ W5 oPNG透明圖片在Mozilla Firefox下顯示良好。$ Q! Y" t" W9 `* a/ m; e- v3 B" J$ k
C) d% D1 t# O: }Internet Explorer 6 % H( y3 i% M5 l5 H. d0 ~% Y; d7 ?
* z1 S" P8 E9 N1 }2 L1 m在IE6中這張PNG圖片的背景卻是一片灰白,真的很難看，除非你的網頁背景色就是一片灰白
7 M: l% M3 e2 r: K# A; O
! b7 N; V3 M* S5 y' V解決方法
' L+ F% e+ m& ?5 k8 w
3 V* T: T' ~* l7 k首先，為你的圖片外套一個DIV層，像這樣:& o- B7 y$ t) a4 ]2 ]/ w2 f
! o0 }4 Q b6 v" R4 ~! V/ T$ Z<body> <div class=」flower」></div> </body>
+ B0 g! L( z. O3 ~
% s' x4 N4 k( ~2 `, U, k2 f然後，在CSS文件裡面寫入:- body {background-color:#000}
/ B4 m6 Z$ _' ?( N' h t3 K
1 S6 A/ H4 } m/ y2 y- div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}
- <!–[if gte IE 5]>; E$ G7 @8 a4 _/ O
+ V& Q7 @& ` v e6 ~5 y6 T* X+ D3 n- <style type="text/css">
2 G' D9 c, M5 u) S) u6 N. \ - ; ]! T/ _# b0 A9 F: [
- div.flower {
# @# n1 t/ `* N8 K' G( [5 X1 g/ Z- Q& \ - / V; y( ^% Y1 w1 j4 z
- background:none;
9 i a& l% \ T# x6 o
# y" c7 F! z2 O* T8 Q6 t0 b- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=』flower.png』 ,sizingMethod=』crop』);
0 d! s2 C Q( V: B. J
4 M5 s: X7 t0 r: h( S/ ~2 \- }% K5 A: G; H0 e! W
- " |+ c8 w4 P3 |4 o5 o
- </style>
) u$ Y, [- F& X! Z6 ^ Y
r& {8 e: N+ g. ` Q; o- J- <![endif]–>
 |
|
發表於 2008-1-29 15:52:33
提升卡
沉默卡
变色卡
