初學網頁設計的朋友可能都會碰到這樣的問題，需要在網頁插入一透明圖片。如果使用Gif格式的透明圖片，可能像素低，顯示不夠清晰。如果用PNG格式透明圖片，在IE6下將達不到透明效果，而是灰色的背景。這會讓你的網頁看上去非常醜陋，任何一個網頁設計師都不想出現這樣的問題，下面是一個小小的教程，教你如何讓PNG格式的透明圖片在IE6下同樣能夠正常顯示。
( J+ a0 t! |+ v6 r+ _2 y$ J& p+ A! T& I' K) |
我們先來看看在透明PNG圖片在Mozilla Firefox和Internet Explorer 6中的顯示差異:. R. d" ^& M& i( `4 A4 ~7 J5 b
- s# H2 ]- T& ?4 m+ j' IMozilla Firefox
& r& u, u8 }- ^0 |
' u9 r# n! \2 O) H9 {2 FPNG透明圖片在Mozilla Firefox下顯示良好。
" \( m7 }$ u+ a& Q) @6 v% m
0 z7 r* C( `: ^! I$ |0 b9 |! bInternet Explorer 6
$ p8 X7 {9 b0 l5 o# X9 B6 k0 |: D$ H! T* P: m/ L: m2 }" @" p
在IE6中這張PNG圖片的背景卻是一片灰白,真的很難看，除非你的網頁背景色就是一片灰白
" j" Z& H7 N) p! b' X2 K ! [/ o) X+ P. }# S/ j/ t
解決方法 : l- D1 t) a* I3 r3 C( O W
7 {" `0 G2 @; o; t$ ^4 t0 b) f2 s首先，為你的圖片外套一個DIV層，像這樣:
3 `4 G* E! R h G& i, S% A" f9 D* P" R7 L6 R
<body> <div class=」flower」></div> </body>
, ^: v9 e6 y" h$ E
B& O7 w# q/ C8 Q然後，在CSS文件裡面寫入:- body {background-color:#000}; [) D1 x; m5 v( Y9 a% h$ ~
- ; }# k' \+ h {9 Y
- div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}
- <!–[if gte IE 5]>
% t5 b1 x9 U6 Q d
1 M4 _5 h, b6 w# r% R1 f- <style type="text/css">7 i O& t% @9 B+ ^( x0 i
4 x" ^, g, K+ J2 E$ d- div.flower {
, w+ d0 L/ s/ H0 F% o( }1 V9 N - / }" c' Y8 |) X: P4 n
- background:none;
, U) E/ @* {' E+ M- I+ d9 |$ x! \/ i
+ f- U, @+ x# v# g- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=』flower.png』 ,sizingMethod=』crop』);& n+ z4 Y. @1 J$ s# W4 `
# a% ?9 a4 y- @( M0 q, G# w- }3 V+ x1 _. U2 S8 n3 V4 z5 d
- $ Z) w( U8 h2 J5 ^$ D1 o6 ^
- </style>, r/ e. F/ X9 ?) Q, j1 w6 I
% Z6 S X/ B' t# Q7 h' T. f- <![endif]–>
) c# i: O, v$ [, O4 R0 s( S0 D |
|
發表於 2008-1-29 15:52:33
提升卡
沉默卡
变色卡
