初學網頁設計的朋友可能都會碰到這樣的問題，需要在網頁插入一透明圖片。如果使用Gif格式的透明圖片，可能像素低，顯示不夠清晰。如果用PNG格式透明圖片，在IE6下將達不到透明效果，而是灰色的背景。這會讓你的網頁看上去非常醜陋，任何一個網頁設計師都不想出現這樣的問題，下面是一個小小的教程，教你如何讓PNG格式的透明圖片在IE6下同樣能夠正常顯示。2 ~; G, j; q4 N8 ~' Q% h1 L
9 X) M! b4 f2 A+ S) [: M+ f我們先來看看在透明PNG圖片在Mozilla Firefox和Internet Explorer 6中的顯示差異:
# Y: M5 Q+ x6 |$ z. v9 b+ ^8 g3 Y7 s3 }. w
Mozilla Firefox
: W& b! ?2 H1 ^1 |! C& W0 p9 h4 K5 K0 P! c; J+ Y8 B s! ` d! b2 D% F
PNG透明圖片在Mozilla Firefox下顯示良好。. o8 ~0 y- q, L- K
 3 x9 r G9 M" |. X
Internet Explorer 6
% I. S& w: @4 Y# v \2 y
. V' \0 Z6 U: }" ^在IE6中這張PNG圖片的背景卻是一片灰白,真的很難看，除非你的網頁背景色就是一片灰白 % v8 ^8 Q! b/ H1 ?9 v8 h8 i
 % w5 _$ E) k# S
解決方法 - i8 r$ w; V7 w# J! G
! k+ G- L) f0 k4 i) S O6 t% e
首先，為你的圖片外套一個DIV層，像這樣:+ u3 H0 ?, ?3 P7 G# ]
# ^. d0 `& w6 c# n
<body> <div class=」flower」></div> </body>
4 Q' V4 s$ Y& P$ f0 k3 E# @' L# O6 x& O8 j, u* A4 p, d
然後，在CSS文件裡面寫入:- body {background-color:#000}* N# Z3 T* E" r! R$ i
- ) S! m' n9 A% S! B: g7 M( U9 Q
- div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}
- <!–[if gte IE 5]>
+ H8 W% |0 Y0 M7 H( \ - . f+ y( q3 o9 K3 ~
- <style type="text/css">
* `3 U+ ^+ g0 u4 m
5 R* e# \2 o( z* F- div.flower {. `7 L! v, C5 \ |
- 3 _" e( S/ }# y- R! H( _8 h" W* A
- background:none;: t' w3 Q e. r7 G% [4 j9 \
- . V- R3 g U; k+ |, ?: Z$ ^
- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=』flower.png』 ,sizingMethod=』crop』);/ x' r& T6 a: O6 }8 b4 `5 x4 f
- + w7 F: W+ p0 M1 |& r
- }) o2 C# n5 u7 L& V) }5 ?, n
$ D- I3 C4 o8 F9 m8 v- </style>0 t: P4 g7 r4 {& s+ x+ O# Z
- ) \' [" w& x4 i& ~2 n: P( z* Q
- <![endif]–>
3 _8 n; B/ t7 _: T+ @) y" x3 O' R+ M6 z |
|
發表於 2008-1-29 15:52:33
提升卡
沉默卡
变色卡
