过期域名预定抢注

 找回密碼
 免费注册

如何讓PNG格式的透明圖片在IE6下正常顯示

[複製鏈接]
發表於 2008-1-29 15:52:33 | 顯示全部樓層 |閱讀模式
初學網頁設計的朋友可能都會碰到這樣的問題,需要在網頁插入一透明圖片。如果使用Gif格式的透明圖片,可能像素低,顯示不夠清晰。如果用PNG格式透明圖片,在IE6下將達不到透明效果,而是灰色的背景。這會讓你的網頁看上去非常醜陋,任何一個網頁設計師都不想出現這樣的問題,下面是一個小小的教程,教你如何讓PNG格式的透明圖片在IE6下同樣能夠正常顯示。$ k% W2 V; z- x6 M' T: G, u, K  o6 F
+ F8 r7 }8 z1 W' r: d
我們先來看看在透明PNG圖片在Mozilla Firefox和Internet Explorer 6中的顯示差異:2 Y  O: \7 J% E. X
2 d+ n* a! p3 `2 h# d7 k, t
Mozilla Firefox
! B( Y4 T* t. R1 b* Y- R7 T2 K+ u# r4 H" S
PNG透明圖片在Mozilla Firefox下顯示良好。6 |: r, ]9 |% w0 k5 L/ P5 |5 R

0 Q; L) e5 \( i8 ZInternet Explorer 6
4 _5 B: m! v6 \' H& S
% ?, u9 S0 k1 n在IE6中這張PNG圖片的背景卻是一片灰白,真的很難看,除非你的網頁背景色就是一片灰白
( ?% A. {0 _: x
% ?' e% O( ?) P- b' M解決方法 $ v8 ]  r# d$ @1 h: {( w
* }: a, a- _1 N1 C" ^
首先,為你的圖片外套一個DIV層,像這樣:
- ?! J7 x0 E5 A* ~8 N& ^5 M% {$ F! T- q: h+ J
<body> <div class=」flower」></div> </body>
; B; a* `6 S( ]. ?' o- E! [! E/ T
+ U' b  S4 w2 w9 P$ K3 ?然後,在CSS文件裡面寫入:
  1. body {background-color:#000}) Q) o6 U: e7 p7 M3 i) U7 s; i
  2. 7 N, e; w0 I' q; p& t! P
  3. div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}
複製代碼
呃,這是指Mozilla Firefox,要讓其在IE6下面正常顯示,你應該在<head>和</head>之間寫入:
  1. <!–[if gte IE 5]>
    6 V; Z9 ^' A  n; X5 {. H3 Q7 m

  2. 0 ?, Z) W8 b* Z, p
  3. <style type="text/css">
    ; h% Y  p/ B$ A7 y) K2 p( R, @
  4. & N( Q! {! n+ @$ o( g5 P- E7 V
  5. div.flower {' f$ Q' c6 n7 S- `6 l" a# b

  6. 7 e! a: K5 O7 [! C7 R9 F+ |
  7. background:none;
    5 Q; U7 a6 A3 P, K$ M+ H9 c2 m
  8. ) I' U1 ?8 s/ l, `$ u6 f( G
  9. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=』flower.png』 ,sizingMethod=』crop』);
    . N" A" l9 P( a. V3 p0 C0 P
  10. % |" l6 ^0 _( H
  11. }
    & x% a- |- g+ X! f* C( a
  12. , Z. q9 L: O) l: a1 V
  13. </style>
    4 i3 y. L# @# X& c; O

  14. 8 K1 R+ I7 R+ N0 m3 C% c
  15. <![endif]–>
複製代碼
這樣,就OK了,下面是加了上面代碼後的IE顯示圖:% v4 k% S( U* l1 i
發表於 2008-1-30 03:08:13 | 顯示全部樓層
回復 给力 爆菊

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 免费注册

本版積分規則

过期高净值品牌域名预定抢注

點基跨境 數位編輯創業論壇

GMT+8, 2025-7-2 06:57

By DZ X3.5

小黑屋

快速回復 返回頂部 返回列表