初學網頁設計的朋友可能都會碰到這樣的問題，需要在網頁插入一透明圖片。如果使用Gif格式的透明圖片，可能像素低，顯示不夠清晰。如果用PNG格式透明圖片，在IE6下將達不到透明效果，而是灰色的背景。這會讓你的網頁看上去非常醜陋，任何一個網頁設計師都不想出現這樣的問題，下面是一個小小的教程，教你如何讓PNG格式的透明圖片在IE6下同樣能夠正常顯示。
& A& t, L$ m1 L/ V0 w5 N) c! N3 V3 F
$ v- O' N: c* }我們先來看看在透明PNG圖片在Mozilla Firefox和Internet Explorer 6中的顯示差異:0 q( Z! a7 n0 a
! Q! w8 ~/ |# w8 X3 u& O2 `: AMozilla Firefox 5 q, r$ F8 V5 L+ Q; k; ^( ]% {
( p ^7 F2 r& e3 ]! S. d7 XPNG透明圖片在Mozilla Firefox下顯示良好。' Y3 _" t" k* H; J
 7 b/ j& k7 S! |+ R
Internet Explorer 6
7 H/ q" X- W, Z, g& s; a4 S/ U- A2 `: |" a3 y
在IE6中這張PNG圖片的背景卻是一片灰白,真的很難看，除非你的網頁背景色就是一片灰白
4 C1 H% v5 X4 a: h0 t8 p" L: w( j / V, A2 n0 b( ~( }
解決方法
. |" S7 w! ~8 L
3 ^) o3 J k& a# G5 E首先，為你的圖片外套一個DIV層，像這樣:: ^' E, j7 H" }
0 P1 P8 f$ I8 H9 c
<body> <div class=」flower」></div> </body>
( ?' o0 }. a9 i/ ]3 n5 }; k1 ]% M3 y8 v, K- j8 V: a1 ] O1 W
然後，在CSS文件裡面寫入:- body {background-color:#000}
, ~% x8 Q" N0 o# _ - ( E" ^1 N2 u/ F& u# O
- div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}
- <!–[if gte IE 5]>
" V( A u) V6 {" v, K/ B) |5 T! }
% q$ N d [' }, p# M `) z T- <style type="text/css">, K i2 |/ m2 l5 l9 B) t/ C
. d( `' M* l' A5 i a- div.flower {
* J3 `) U% ~2 y) d3 ^7 e
0 Y' o N7 ]; y& i- background:none;
1 u5 _, u/ g( x) Y Q- q" @
8 r# `% F0 M. T I6 N* Y- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=』flower.png』 ,sizingMethod=』crop』); c; W3 \0 q% {
- + d9 d" a3 J9 j+ n9 o" i+ u
- }, v- X0 F+ `/ |9 n) N0 ~# [
* l* ~# t1 ~& u- </style># Y7 L: K d/ S1 C
) S$ d t: b& {* ^/ G" x- <![endif]–>
, p! s0 f% U/ r |
|
發表於 2008-1-29 15:52:33
提升卡
沉默卡
变色卡
