如何讓瀏覽器不支持PNG透明效果？

我們的（心愛的）設計師不斷創建透明背景的PNG文件，以便在我們的應用程序中使用。我想確保PNG的這個功能也適用於「較舊」的瀏覽器。什麼是最好的解決方案？如何讓瀏覽器不支持PNG透明效果？

編輯下面

@mabwi & @syd - 不管是不是我同意使用PNG是不是重點。這是我需要解決的問題！ 0127.JS看起來很酷，但我不認爲我想介紹一個應用程序的所有其他更改。我想要一個專門解決PNG問題的解決方案。感謝您的鏈接。

來源

2008-08-13 Ian Robinson

這是一個偉大的文章，解釋和說明如何處理舊的瀏覽器PNG透明度：http://www.alistapart.com/stories/pngopacity/

來源

2008-08-13 19:14:48 SitWalkStand

該文章是相當過時，並使用非常蹩腳的瀏覽器檢測。有比這更優雅的解決方案，例如http://www.twinhelix.com/css/iepngfix/ – Kornel 2009-01-26 14:04:48

-1

我可能會誤解，但我非常確定IE6和更少只是不透明與PNG文件。

我有兩個「解決方案」，我使用。要麼創建帶有透明度的GIF文件並將它們用於任何地方，要麼將它們用於帶有條件樣式表的IE 6及更早版本。第二種方法只適用於將它們用作背景等。

來源

2008-08-13 19:12:49 MattBelanger

你錯了 – 2009-11-17 05:50:37

使用CSS過濾器允許png透明度在IE 6中 – 2009-11-17 05:51:07

IE7.js將在IE6中提供對PNG（包括透明度）的支持。

來源

2008-08-13 19:12:56

我嘗試了很多解決方案，但是這個工作真的完成了！並且還有許多其他簡潔的功能，因爲它試圖使Microsoft Internet Explorer的行爲像一個符合標準的瀏覽器。它修復了許多HTML和CSS問題，並使IE6和IE6下的透明PNG工作正常。 – Kasper 2008-10-07 15:51:54

因此我推薦給大家！（抱歉的額外評論） – Kasper 2008-10-07 15:52:39

我相信所有的瀏覽器都支持PNG-8。它不是阿爾法混合，但它確實有透明背景。

來源

2008-08-13 19:34:04 Will

PNG-8 *可以*進行alpha混合。您可能指的是Photoshop中的錯誤/限制。 – Kornel 2009-01-26 13:59:27

我發現什麼看起來在這裏很好的解決：Unit Interactive -> Labs -> Unit PNG Fix

更新單位PNG也配備在list of PNG fix options on NETTUTS

下面是從他們的網站的亮點：

非常小巧的javascript：1kb以下！
修復IE過濾器屬性導致的一些交互性問題。
適用於img對象和背景圖像屬性。
自動運行。您不必定義類或調用函數。
允許自動寬度和自動高度元素。
超級簡單部署。

來源

2008-08-13 20:39:54

我可能會誤解，但我很確定IE6和更少只是不透明與PNG文件。

你有點，你有點不是。

IE6本身沒有支持他們。

然而，IE有瘋狂的自定義JavaScript/CSS和COM對象（這是他們最初是如何實現的XmlHttpRequest）

所有這些黑客基本上做到這一點支持：

找到所有的PNG圖片
使用directx圖像過濾器加載它們並以某種格式生成透明圖像IE可以理解
用過濾後的副本替換圖像。

來源

2008-08-13 23:11:57

我搞砸了試圖使用.pngs網站，它只是不值得。該網站變得緩慢，你使用的黑客不能100％工作。這裏有一個good article on some options，但我的建議是找到一種方法來使GIF工作，直到你不必支持IE6。或者只是給IE6一個退化的體驗。

來源

2008-08-13 23:31:12

在IE6中使用PNG幾乎沒有任何其他瀏覽器更困難。你可以在沒有Javascript的情況下在你的CSS中支持它。我已經看到了這個黑客面前顯示...

div.theImage { 
    background : url(smile.png) top left no-repeat; 
    height  : 100px; 
    width  : 100px; 
} 

* html div.theImage { 
    background : none;  
    progid:DXImageTransform.Microsoft.AlphaImageLoader(src="layout/smile.png", sizingMethod="scale"); 
}

我不敢肯定這是有效的CSS，但根據該網站上，也可以不那麼重要了。

（這是值得注意的是，第一個圖像的URL是基於樣式表，其中第二是基於網頁的目錄正在查看的目錄 - 因此，他們爲什麼不匹配）

來源

2008-09-18 13:29:34 Hugoware

@ Hboss

如果你確切地知道所有要顯示的文件（以及每個文件的維度），那麼這些都很好，並且很花哨 - 維護該CSS文件將會是極大的痛苦，但我想它有可能。當你想開始使用透明的PNG來實現一些非常常見的目的時：a）偶發的圖形，例如在任何背景下工作的圖標（可能大小不一），以及b）重複背景;那麼你被搞砸了。我試過的每種解決方法在某些時候都遇到了絆腳石（當背景透明時不能選擇文本，有時圖像以粗糙的尺寸顯示等），我發現爲了獲得最大的可靠性我將不得不恢復爲GIF。

我的建議是讓PNG透明度破解一個鏡頭，但同時意識到它絕對不是完美的 - 只要記住，你向後彎曲了一個超過7年的瀏覽器的用戶。我現在所做的是給IE6用戶第一次訪問該網站的一個彈出窗口，並提醒他們瀏覽器已過時，並且不提供現代網站所需的功能，儘管我們會盡力給你最好的，如果你血腥升級，你會從我們的網站和整個互聯網獲得更好的體驗。

來源

2008-09-18 13:56:00 nickf