當柳上原的風吹向天際的時候...

          真正的快樂來源于創造

            BlogJava :: 首頁 :: 聯系 :: 聚合  :: 管理
            368 Posts :: 1 Stories :: 201 Comments :: 0 Trackbacks
          PNG圖片作為網頁圖的一個好處是它允許有透明背景,這一點比gif格式做得要好,但也有不如意的地方,就是在FireFox上PNG的透明背景顯示得很好,但是在IE中就做不到了,這就需要濾鏡技術的幫助。

          比如有一張圖片作為logo,它放在一個id為logodiv的DIV中,在CSS中是這樣定義的:
          #logoDiv{
              width
          :300px;
              height
          :100%;
              background
          :transparent url(../img/logo.png) no-repeat -65px 0px;
          }

          這張圖片在FF顯示沒有問題,在IE6中就需要加上這樣一段:
          *html #logoDiv{
              width
          :300px;
              height
          :100%;
              margin-left
          :-65px;
              background-color
          :transparent;
              background-image
          :none;
              filter
          :progid:DXImageTransform.Microsoft.AlphaImageLoader(src="web/img/logo.png", sizingMethod="crop");
          }
          這段代碼FireFox是不認識的,會被略過,圖片會繼續上面#logoDiv的效果,而IE會用下面一段取代上面這一段,所以濾鏡透明圖片的效果就出現了。這兩段代碼放在一起,無論客戶瀏覽器是IE6或是FireFox都能適應了。

          使用濾鏡有兩點需要注意的:一是圖片地址是網頁相對app的地址,不是css相對app的地址,所以上面兩處路徑會有差異;另外一點是在不同的IE濾鏡的寫法也有差異,需要根據客戶瀏覽器實際情況調整一下。

          具體代碼請見,其中有三處使用了濾鏡,分別是logo,主菜單左側和右側,您可以從下面的代碼中去尋找它們
          http://www.box.net/shared/tz5k1um68l
          http://www.box.net/shared/mbdf2e85yi



          posted on 2011-03-04 13:13 何楊 閱讀(917) 評論(0)  編輯  收藏

          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 巨鹿县| 阳谷县| 九江市| 黄大仙区| 克什克腾旗| 益阳市| 侯马市| 潜江市| 柏乡县| 江阴市| 崇义县| 赫章县| 西和县| 高邑县| 柏乡县| 敖汉旗| 遵化市| 正宁县| 台中市| 信阳市| 洛阳市| 富锦市| 柳河县| 盐池县| 德保县| 松原市| 中卫市| 集贤县| 井陉县| 湘潭县| 读书| 嘉荫县| 施甸县| 靖宇县| 德化县| 茂名市| 西青区| 梁山县| 茶陵县| 兰州市| 张家川|