初學網頁設計的朋友可能都會碰到這樣的問題，需要在網頁插入一透明圖片。如果使用Gif格式的透明圖片，可能像素低，顯示不夠清晰。如果用PNG格式透明圖片，在IE6下將達不到透明效果，而是灰色的背景。這會讓你的網頁看上去非常醜陋，任何一個網頁設計師都不想出現這樣的問題，下面是一個小小的教程，教你如何讓PNG格式的透明圖片在IE6下同樣能夠正常顯示。7 b0 C6 i& U% X4 `" a1 E5 C; }
7 T* W) F" |* o* u% O我們先來看看在透明PNG圖片在Mozilla Firefox和Internet Explorer 6中的顯示差異:
. I/ p3 }& N% \# |4 h9 C' z+ z. J; ]; v& |7 u
Mozilla Firefox + y" }8 O# S8 H; Z/ h
& \, r' L! k0 G {2 ?4 i7 ?PNG透明圖片在Mozilla Firefox下顯示良好。) a% c5 D) p8 Y! i" R# ]5 L+ \
 , `! j o, a( @9 q3 P, F
Internet Explorer 6 8 s* d0 s& m$ [' {" b
* @! D& ?/ ~) N& d1 w' J$ c S; I在IE6中這張PNG圖片的背景卻是一片灰白,真的很難看，除非你的網頁背景色就是一片灰白 1 `9 R" B! S8 V: D7 ~" m" b" b* ~; C
 , \8 Z' j) J8 L' n- J4 X" J
解決方法
; x$ a5 V& ] U1 [, G/ f7 m+ w0 m( Y& S- f, h, c$ z- P8 L+ ?
首先，為你的圖片外套一個DIV層，像這樣:2 |0 J( }7 ^0 l2 _
5 Z# s) b8 f( ?3 L O<body> <div class=」flower」></div> </body>
& t2 [- I$ k; B1 |9 ]5 B8 ]/ j6 G, A8 A8 P6 V: T
然後，在CSS文件裡面寫入:- body {background-color:#000}; I; d3 J% K% f8 D: |
- ; ^' ?) U& L6 E% R9 D7 s2 }
- div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}
- <!–[if gte IE 5]>+ Z; p' v2 d' G
- 3 E( w! H* \) t3 ~; |; [
- <style type="text/css">
( [; K+ y3 g4 u+ y! Y# M0 |
5 S& T# l, x: o3 Z* B- div.flower {+ n5 [# y8 U! O9 E
7 d' J9 g P" G+ `1 F2 N- a- background:none;: a7 W5 m! Y- I! q4 {( {* _
$ ~4 E2 e$ i' I; N- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=』flower.png』 ,sizingMethod=』crop』);7 h: T5 c4 ^9 k! Y( |3 i& Z! ^) o9 k
- G6 G( r" ]8 R+ X4 }; I- }
* P( I: |/ k( {9 R* A) w V - " V5 B% L7 ]7 N
- </style>+ o7 F: D& N: {& g. P
- v. G' m/ ]' e4 S6 u4 O
- <![endif]–>
' A1 W6 W- r: d7 S" A5 q- D |
|
發表於 2008-1-29 15:52:33
提升卡
沉默卡
变色卡
