竞彩足球比分如何分析|竞彩足球比分加时
 
您現在所在位置:主頁 > 服務項目 > 網站建設 > 網站建設知識 >

如何解決IE6PNG圖片、背景透明?

時間:2012-12-23 11:38     點擊:次     文章來源:西安網站建設|設計     [關閉]

筆者精選了3中解決方案,也是目前正在使用的方法。針對不同情況選擇方案,基本所有問題都解決了。 1.通過CSSHack技術處理; a)書寫正常的CSS代碼,通過background樣式屬性引入圖片,這樣
 

筆者精選了3中解決方案,也是目前正在使用的方法。針對不同情況選擇方案,基本所有問題都解決了。

1.通過CSSHack技術處理;

a)書寫正常的CSS代碼,通過background樣式屬性引入圖片,這樣所有的瀏覽器均使用了此PNG圖片;

background:url(http://www.west258.com/public/upLoad/inke_dreamweaver.png);

結果預覽如下:

非IE6及IE6以上版本顯示:

 

 

IE6及以下版本顯示:

 

 

解決方案:

b)利用IE濾鏡將IE6引入圖片,濾鏡引入圖片是路徑是相對于HTML文檔本身,而不是相對于CSS文件,語法如下: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="inke_dreamweaver.png");

代碼寫到這里,我們測試IE6還是沒有透明,因為我們雖然設置了濾鏡引入圖片,但是background也同樣加載了此圖片,又因為background的圖層比濾鏡設置的高,所以才沒有顯示出來。 所以我們得出的結論就是當我們使用filter的時候,就要使background失效,因此我們可以使用CSSHack來解決此問題, 只需要將IE6的background:none;即可,那么可以得出的代碼如下:

_background:none; /*此代碼只有IE6識別*/

又因為filter只在IE6下讓其產生作用,IE6+版本的瀏覽器雖然也識別filter,但是png透明是沒有灰底問題的,所以我們同樣將filter也加上IE6 Hack即可。

c)最終我們可以得到如下代碼:

#pics

{

background:url(../images/W3CfunsLogo.png) no-repeat; /*以下為IE6設置PNG透明代碼*/

_background:none;

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="inke_dreamweaver.png"/>

}

注意:inke_dreamweaver.png是相對與當前html文件的路徑,而不是與CSS文件的路徑。

提示:如果需要使其支持鏈接的hover,那么需要在CSS中定義:cursor:pointer;使其呈現手型,否則將為默認的鼠標狀態。

優點:

1、綠色無插件;

2、效率高,速度快;

3、網速慢的時候,不會出現先灰底再透明的情況,支持遠程圖片;

4、支持Hover等偽類,但是得使用兩張圖片,網速慢的情況下,會導致第二張圖片暫時無法顯示,因為還沒有完全載入;

缺點:

1、不支持平鋪,雖然filter有sizingMethod="scale", 拉伸縮放模式,但是圖片會變形,如果單純的顏色或簡單的漸變色還能橫向平鋪;

2、不支持Img標簽;

3、不支持CSS Sprite;

使用情況:

1、當沒有img引入png時可考慮;

2、當沒有CSS Sprite需求時可考慮;

3、當沒有平鋪需求時候可考慮;

2.jQuery插件的誕生;

介紹:jQuery為我們帶來了很大的方便,jQuery沒有讓我們有太大的失望,img和png都同時得以支持,唯一美中不足的還是無法平鋪,無法使用CSS Sprite。

插件下載地址:www.west258.com/webJs/js/jquery.pngFix.zip

使用方法:

由于此js只有使用IE6時才有用,所以為了讓我們的頁面更加高效的執行,我們可以將上方代碼修改如下,只有IE6的時候才調用執行此JavaScript:

加到頁面中間。

優點:

1、CSS代碼看起來很優雅,只需要引入js進行簡單的配置一下就行了,效率還算不錯;

2、支持背景圖,支持img;

缺點:

1、額外加入了js文件和圖片文件,增加http請求;

2、加載了一個龐大的jQuery類庫;

3、多庫共存的時候可能會出現問題;

4、不支持平鋪;

5、不支持CSS Sprite;

6、當文件載入之前,會先暫時呈現灰底;

7、不支持Hover等偽類;

使用情況:

當您的項目中使用jQuery的時可以考慮;

3.Javascript編寫的PNG圖片庫;

介紹:此庫通過傳遞html標簽即可實現該標簽內的圖片或者背景透明,缺點是,不能同時支持a與a:hover透明,只能支持一種模式。同樣利用js做切換也不支持滑過效果。

插件下載地址:www.west258.com/webJs/js/Png.zip

使用方法:

由于此js只有使用IE6時才有用,所以為了讓我們的頁面更加高效的執行,我們可以將上方代碼修改如下,只有IE6的時候才調用執行此JavaScript:

加到頁面中間。

優點:

1、CSS代碼看起來很優雅,只需要引入js進行簡單的配置一下就行了,效率還算不錯;

2、支持背景圖,支持img;

3、不支持背景平鋪;

缺點:

1、額外加入了js文件和圖片文件,增加http請求;

2、不支持CSS Sprite;

3、不支持Hover等偽類;

轉載時請注明來源:互成網絡

  • 西安唐華精工環境工程有限公司

    西安唐華精工環境工

  • 陜西出版集團

    陜西出版集團

  • 西安金泰展覽展示有限公司

    西安金泰展覽展示有

  • 美果設計培訓中心

    美果設計培訓中心

  • 長安教育網

    長安教育網

服務項目:網站建設網站托管微信公眾平臺開發/營銷搜索引擎優化域名主機郵箱400電話平面設計競價推廣App制作及開發POS機銷售企業彩鈴短信群發


總部:西安市長樂西路17號第四軍醫大學3區綜合樓4樓
業務外聯部:  鐘樓  東郊  西郊  南郊  北郊
郵編:710032        QQ:350795135   1021809792
電話:029-87576500    15249183019
網址:www.qycel.com.cn       郵箱:[email protected]

 
竞彩足球比分如何分析