IE下透明PNG圖片的顯示

          Posted on 2007-05-04 01:30 sunbaby 閱讀(637) 評論(0)  編輯  收藏 所屬分類: 其它

          PNG(Portable Network Graphics)是W3C推薦的網頁圖片通用格式,但是Microsoft的IE6以下(IE7已經支持)沒有把PNG的Alpha 通道打開,造成透明PNG圖片的效果出不來。在Firefox、Opera下顯示正常的透明PNG圖片,在IE下瀏覽時就會帶有灰色背景色,不透明的就像這樣:

           

          解決方法之一是給透明PNG圖片加一個濾鏡:

          <div style="width:100%;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='透明PNG圖片路徑',sizingMethod='image')></div>
          或是用CSS的方式控制,把style寫在CSS文件中,就不用每貼一張圖都要寫這么長的代碼了。

          PS:因為IE5.0以下不支持AlphaImageLoader濾鏡,所以IE5.0以下就不能顯示透明PNG效果了,不過現在還用IE5.0以下的恐怕是沒人了吧。

          關于AlphaImageLoader濾鏡

           

           

          語法:
          filter: progid: DXImageTransform.Microsoft.AlphaImageLoader( enabled=bEnabled, sizingMethod=sSize, src=sURL)
          屬性:
          enabled : 可選項。布爾值(Boolean)。設置或檢索濾鏡是否激活。true | false
                true : 默認值。濾鏡激活。
                false : 濾鏡被禁止。

          sizingMethod : 可選項。字符串(String)。設置或檢索濾鏡作用的對象的圖片在對象容器邊界內的顯示方式。 crop : 剪切圖片以適應對象尺寸。
                  image : 默認值。增大或減小對象的尺寸邊界以適應圖片的尺寸。
                  scale : 縮放圖片以適應對象的尺寸邊界。        

          src : 必選項。字符串(String)。使用絕對或相對 url 地址指定背景圖像。假如忽略此參數,濾鏡將不會作用。

          說明:
          在對象容器邊界內,在對象的背景和內容之間顯示一張圖片,并提供對此圖片的剪切和改變尺寸的操作。如果載入的是PNG(Portable Network Graphics)格式,則0%-100%的透明度也被提供。
          PNG(Portable Network Graphics)格式的圖片的透明度不妨礙你選擇文本。也就是說,你可以選擇顯示在PNG(Portable Network Graphics)格式的圖片完全透明區域后面的內容。

           

           

          posts - 2, comments - 2, trackbacks - 0, articles - 25

          Copyright © sunbaby

          free web counter
          free web counter 點擊發送消息給我
          主站蜘蛛池模板: 肇庆市| 永康市| 探索| 绥芬河市| 平湖市| 滦南县| 德化县| 英超| 芜湖市| 正阳县| 两当县| 朔州市| 凤城市| 黎川县| 田林县| 广东省| 佛冈县| 中方县| 上蔡县| 确山县| 海门市| 乌兰县| 綦江县| 桃源县| 临江市| 彰化县| 大足县| 通州市| 大邑县| 山阴县| 平邑县| 屏东县| 赤峰市| 潞西市| 阜阳市| 青川县| 华阴市| 天镇县| 滁州市| 朝阳市| 上犹县|