全集 IE6中PNG Alpha透明
【全集 IE6中PNG Alpha透明】很多人說IE6不支持PNG透明,其實IE支持100%透明的PNG , 瘋狂的IE6只是不支持png的Alpha透明 。
這個BUG給我們帶來了很大的困擾 。
但是這仍然存在很多問題,比如半透明的PNG背景圖片 。
Gulu77整理了4種IE6中PNG Alpha透明的方法:
測試實例:http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_IE6png8/index.html
這里用IE6測試 , 插入的圖片和背景圖片沒有透明 。
第一種方法:AlphaImageLoader 篩選器
微軟給出了一個解決方案:http://support.microsoft.com/kb/294714/zh-cn
使用簡介:在每個標簽樣式中插入 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=https://www.questions.com.cn/dnjc/image.png, sizingMethod=scale)
注意事項:
AlphaImageLoader難以實現插入圖片img src=https://www.questions.com.cn/dnjc/.png/透明
AlphaImageLoader方法用于背景圖片上,實現background-image的效果
AlphaImageLoader IE8不支持
因為IE7支持AlphaImageLoader,避免沖突建議使用CSS hack區分開,只針對IE6使用
測試實例:http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_AlphaImageLoader/index.html
第二種方法:PNG Transparency in IE
使用簡介:相對來說比較簡潔 , 使用一段包含濾鏡的JavaScript 就可以模擬圖片或背景 PNG alpha 透明度
注意事項:
根目錄的spacer.gif透明圖片作為png圖片的替換,寫在JavaScript中的spacer.gif路徑根據需要調整
PNGTransparncyinIE方法在背景應用上只能做到background-image的效果, 背景重復坐標調用等暫時實現不了
官方原文:http://codingforums.com/archive/index.php?t-80555.html
測試實例:http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_PNGTransparncyinIE/index.html
第三種方法:IE PNG Fix v1.0 / 2.0 Alpha 3
這是目前最新版本,今天重點介紹的一個方法 。
使用簡介:頁面標簽使用behavior:url(iepngfix.htc);來調用外部包含js、css的iepngfix.htc文件來修正PNG alpha 透明度 。
測試實例1:http://www.css88.com/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html
測試實例2(官方,e文):http://www.css88.com/demo/IE6_bug/IE6_bug_2/iepngfix.html
* 支持img src=https://www.questions.com.cn/dnjc/元素 。
* 支持的背景PNG圖像(不像許多其他的腳本! )
* 支持CSS1背景重復和位置(通過可選插件)
* 背景圖像可以被界定內置或在外部的樣式表 。
* 自動處理改為鋼骨混凝土/背景通過正常的JavaScript (例如鼠標懸停翻車) -沒有特殊的編碼需要 。
* 改變支持包括CSS的類別的變化因素 。
* 采用自動變通的a href=https://www.questions.com.cn/dnjc/要素巴布亞新幾內亞背景因素 。
* 微小的腳本(快速下載)。
* 領有牌照的下一個自由軟件許可證 。
如何使用 Follow these simple steps to add this to your page:遵循這些簡單的步驟 , 將此添加到您的網頁:
1. 復制并粘貼iepngfix.htc和blank.gif到您的網站文件夾中 。
2. 復制并粘貼到您的網站的CSS或HTML :
style type=text/css
img, div { behavior: url(iepngfix.htc) }
/style
這的CSS選擇器必須包含標簽/內容要巴布亞新幾內亞支持-基本上,給它一個逗號分隔的清單上的標簽使用 。它還必須包括正確的路徑 。宏達相對H TML文件的位置(不相對的CSS文件! )。例如,你可能看起來像這樣:
style type=text/css
img, div, a, input { behavior: url(/css/resources/iepngfix.htc) }
/style
3. 如果您的網站使用的子文件夾,打開 。宏達文件在文本編輯器如Windows記事本,并改變blankImg變數,包括正確道路blank.gif像這樣:
IEPNGFix.blankImg = ’/images/blank.gif’;
同樣的路徑是相對的HTML文件 。否則,你將看到一個破碎的形象的圖形!
4. 如果你想支持CSS1背景重復和背景位置,請務必包括附加 。js文件在您head :
script type=text/javascript src=https://www.questions.com.cn/dnjc/iepngfix_tilebg.js/script
否則 , 背景圖片可以工作,但不會重復或立場 。
5. 可以舒舒服服地坐下欣賞! 也許考慮捐助,以支持該腳本的發展如果你喜歡您所看到的,因為我花了數百小時的開發,測試和支持它: )。另外,我一定會感謝一個入鏈接您的網站到地雷!
官方原文:http://www.twinhelix.com/css/iepngfix/
如果你有興趣了解更多信息或另一種方法激活的腳本保持審定的CSS相容性,看到源代碼演示文件 。
如何解決共同問題
1.我已經貼在CSS中 , 但我pngs并不透明!
請務必記住,路徑個文件是相對于HTML文件 , 而不是的CSS文件(如的CSS背景圖像)。如果您想要測試的路徑,插入: alert(’This works!’);進入 。宏達文件 。
2.它的工程離線而不是在線 。
第一次嘗試解壓這個預設的示范和上傳到Web服務器原樣 。如果它不工作 , 您可能有一個MIME類型的問題 。您必須確保您的服務器發送正確的MIME類型文本/的X組成部分的 。宏達文件 。嘗試之一,這兩個容易修復程序:
3.上傳的 。htaccess 文件,該腳本的下載壓縮到Web服務器上 , 這將使阿帕奇發出正確的MIME類型 。
4.而不是所謂的 IEPNGFIX.HTC 從你的CSS,上傳IEPNGFIX.PHP的同一文件夾中,并呼吁不是 , 這也發出了正確的MIME類型 。
5.我pngs是透明的,但有一個有趣的邊界或紅色的 X 圖標 。
檢查blankImg變量設置正確的 。宏達文件,再次相對應的HTML文件 , 載PNGs。
圖像扭曲,或此腳本休息,我的網頁布局 。
當適用于圖像沒有設置方面,該腳本將嘗試與猜測正確的圖像尺寸和適用的 。如果它獲得做錯了什么,給您一個明確的圖像width。
鏈接或表單元素一個pngd元素是不能點擊 。
測試實例1:http://www.css88.com/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html
測試實例2(官方,e文):http://www.css88.com/demo/IE6_bug/IE6_bug_2/iepngfix.html
第四種方法:IE PNG Fix v1.0 / 2.0 Alpha 3
使用簡介:ie7/ie8-js是一個解決IE與W3C標準的沖突的JS庫,使微軟的IE的行為像一個Web標準兼容的瀏覽器,支持更多的W3C標準 。
官方原文:http://code.google.com/p/ie7-js/
測試實例:http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_ie7-js/index.html
