初學網頁設計的朋友可能都會碰到這樣的問題，需要在網頁插入一透明圖片。如果使用Gif格式的透明圖片，可能像素低，顯示不夠清晰。如果用PNG格式透明圖片，在IE6下將達不到透明效果，而是灰色的背景。這會讓你的網頁看上去非常醜陋，任何一個網頁設計師都不想出現這樣的問題，下面是一個小小的教程，教你如何讓PNG格式的透明圖片在IE6下同樣能夠正常顯示。, K- D8 N$ l' H; Q* X% a# ^
" S I% s6 H, _6 B4 Q/ \4 L& R) p2 Y; N9 k我們先來看看在透明PNG圖片在Mozilla Firefox和Internet Explorer 6中的顯示差異:
" t$ J, N; K! X; S$ ?& [# w- c) Q6 o, m. [
Mozilla Firefox
) X" r- S! V7 ~8 [
8 h0 I$ x# a) C7 j! G0 [$ V0 ?9 @PNG透明圖片在Mozilla Firefox下顯示良好。
1 x2 f( |% O! {2 D* ]2 I, f + B0 |1 a/ ?5 [+ p# G
Internet Explorer 6 + t' I9 Z8 M( V+ Z
8 H# |$ f% U9 {* k% h& }; a$ p在IE6中這張PNG圖片的背景卻是一片灰白,真的很難看，除非你的網頁背景色就是一片灰白
' X) V6 A9 O5 Z; V& R5 j3 j& b/ j4 r5 V
' ?! L4 ^! K5 ?0 Y3 ]0 A1 _解決方法 " }# l9 U( ?' U5 [5 ~+ z6 I* {- U z
' u) k) G1 {1 ?, w% D7 ~首先，為你的圖片外套一個DIV層，像這樣:
; S4 @. }1 |5 S; `
' X5 @ G: F# W7 r x* h K<body> <div class=」flower」></div> </body>
; l0 Q8 c( p# p- C9 X3 G
- N; D' j( m9 S6 \然後，在CSS文件裡面寫入:- body {background-color:#000}
0 c0 ~ J- h# I& \7 B! T3 d9 K. a' h
* z. @* Q/ |, }6 n! M- div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}
- <!–[if gte IE 5]>
& ^' q5 D ?" A- K
4 C$ I% L6 i) w4 Y" a- <style type="text/css">
8 E* @6 H( z$ W9 K - 7 L H. i) ^/ y4 w6 G0 y
- div.flower {( [' U9 V. U1 m. r6 i- F+ |8 l4 A
- 1 }) o7 N0 U& F: g# W" h' Q( h; R
- background:none;
4 ~6 h* G9 I7 |8 J; W
$ C7 Y$ L0 g, x+ Y4 ^8 U. \- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=』flower.png』 ,sizingMethod=』crop』);$ h, ?9 C1 [4 V# W# E* x
6 u/ r7 ~- q2 O4 G `! B- }
% h2 P. ]1 q5 w/ I5 [3 T5 Y
3 |5 V9 m2 L+ m- q& i5 S- </style>" x# r* `1 T& @4 _1 i$ E
$ g$ F) t$ u: ?- Z- <![endif]–>
, U' j4 ?, d% F& F0 y |
|
發表於 2008-1-29 15:52:33
提升卡
沉默卡
变色卡
