初學網頁設計的朋友可能都會碰到這樣的問題，需要在網頁插入一透明圖片。如果使用Gif格式的透明圖片，可能像素低，顯示不夠清晰。如果用PNG格式透明圖片，在IE6下將達不到透明效果，而是灰色的背景。這會讓你的網頁看上去非常醜陋，任何一個網頁設計師都不想出現這樣的問題，下面是一個小小的教程，教你如何讓PNG格式的透明圖片在IE6下同樣能夠正常顯示。
- o0 i+ Y: p# H- o9 d8 s- J* T8 f" R
我們先來看看在透明PNG圖片在Mozilla Firefox和Internet Explorer 6中的顯示差異:
, D/ o6 _! P5 n0 z( \) s* L) S" B3 Y( D; p- x; a* o! y# b1 R9 K
Mozilla Firefox
4 H: r0 a9 J. a) l6 c6 ~" D# q0 q8 O$ ~4 U5 r% a
PNG透明圖片在Mozilla Firefox下顯示良好。/ t+ x# J+ M3 Q: x+ ^
H O, K7 r6 _, r. yInternet Explorer 6
4 q& l& p! m& }0 Z- e; l i8 w8 a( Q' n$ D, ~0 ~6 Z
在IE6中這張PNG圖片的背景卻是一片灰白,真的很難看，除非你的網頁背景色就是一片灰白
7 a) m% ^& \0 c2 J* l0 X 0 r1 O3 d& _0 V( P
解決方法 * j& W! x- M' t5 S- d; r
7 {- y; X: k& M* w首先，為你的圖片外套一個DIV層，像這樣:
! b3 `4 `) {. A& B
+ }- u- `' ~& r2 P2 K<body> <div class=」flower」></div> </body>
: E) ?5 U$ g$ L% t- A5 f; \( [! d- F4 h, @5 U5 A, }1 X
然後，在CSS文件裡面寫入:- body {background-color:#000}
- G+ X9 [7 C6 E- x2 Q
3 U" z& n& y' a; ]& Y* m- div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}
- <!–[if gte IE 5]>
" j) e# u; M7 G5 Q( T; c9 y1 H - 5 d2 Q q1 t" [ T
- <style type="text/css">% U. {$ {8 f. z1 K- y
! V1 x5 I( J" V! B. C5 ?- div.flower {4 d# D8 N+ T6 Q, D" @& z
9 M& s# |5 D$ r, O2 I! T- background:none;4 M1 {! C) {' f2 x* a2 D9 ]4 Y3 X! R
3 _( w- w i6 \% m0 q! s- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=』flower.png』 ,sizingMethod=』crop』);
, U6 q1 o) h. q9 A, u - 8 R1 p( Y+ V- J; l& Q5 `0 }- ~6 |' h3 W
- }/ U; S6 T" p! O, R7 w- p; ^' J7 ~
& ?! m$ x% G9 ~- </style>
* j/ x5 Q* b3 h1 a2 R6 U) Q, ]
5 p3 B% g1 B& P+ o8 M/ P7 Y/ e- <![endif]–>
) h' P/ k2 w, e' }5 u6 ? |
|
發表於 2008-1-29 15:52:33
提升卡
沉默卡
变色卡
