跨瀏覽器rgba透明背景，同時保持內容（文本和圖像）不透明

我想獲得rgba背景與所有瀏覽器一起工作。我做了一些搜索，發現通常有三種類型的瀏覽器：跨瀏覽器rgba透明背景，同時保持內容（文本和圖像）不透明

1）支持rgba的瀏覽器。

2）通過奇怪的「-ms-filter」事物支持rgba的Internet Explorer。

3）不支持rgba的瀏覽器，但我可以使用'數據URI方案'的base64 PNG圖像。（即使瀏覽器不支持URI方案，依照this它仍然可以完成。）

我沒有rgba支持瀏覽器的問題，我可以使用IE瀏覽器工作，但問題是我不知道如何爲URI方案生成客戶端的base64 png圖像。我真的不想預生成PNG文件，因爲我的rgba值不是恆定的。我可以用php gd library來動態生成png代碼，但我真的很想在客戶端做所有這些。所以我想知道，有沒有什麼好辦法用java腳本生成半透明png圖像。在此之後，我可以base64編碼它們並使用它們與URI方案？

謝謝。

編輯：

我想有半透明的div背景，同時具有內容完全可見。

來源

2011-01-25 Mikk

你想擁有不透明度或部分透明度？ –

css3pie可能是唯一的答案。這是一個JS庫，是的，它很煩人，但到目前爲止，我還沒有看到在IE8或更低版本上工作的MS過濾器屬性的任何證據。 –

See this blog post一個跨瀏覽器的方法：

.alpha60 { 
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(0, 0, 0); 
    /* RGBa with 0.6 opacity */ 
    background: rgba(0, 0, 0, 0.6); 
    /* For IE 5.5 - 7*/ 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); 
    /* For IE 8*/ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; 
}

Web瀏覽器支持

的RGBA支持可用：火狐 3+ 2+ Safari瀏覽器Opera 10的

過濾器在Internet Explorer中從Internet Explorer 5.5開始可以使用。

這意味着這將適用於幾乎所有人的！

See here爲一種簡單的方法來生成IE過濾器的顏色。

這樣做應該不需要使用「base64 PNG圖像和'數據URI方案'」。

如果你真的，真的要生成客戶端.png圖像（我看不出這裏有必要的話）：

Generate client-side PNG files using JavaScript.很酷的想法，真正做到：

這是再次是那些晚上其中我入侵的藥物，沒有就在眼前。當然，5年前你曾經愛過我這樣的項目，但在HTML5時代與畫布元素很難打動你。所以把它作爲創建客戶端沒有畫布，SVG或服務器端渲染和AJAX 處理的副圖像的證明。

但這怎麼可能？那麼，我實現了一個像libpng的客戶端JavaScript 庫，它創建了一個 PNG數據流。可以使用Base64編碼將產生的二進制數據附加到數據 URI-方案。

來源

2011-01-25 10:10:19 thirtydot

謝謝，但我關心的部分是'不支持RGBa的Web瀏覽器的回退（Fallback）「。我想也許它仍然可以通過URI方案完成。也許我太擔心使用舊瀏覽器的人？ – Mikk

舊的瀏覽器是什麼？這顯然適用於* IE 5.5 * .. – thirtydot

+1不需要這些客戶端base64圖像... 99％的用戶會得到不錯的不透明度。 – kapa

我認爲不支持rgba的瀏覽器也不支持base64。但是，你可以簡單地使用一個2x2 px半透明PNG背景圖像（不是1x1，以避免與IE的奇怪的錯誤）。

來源

2011-01-25 10:05:23 MatTheCat

謝謝你的回答。我在我的問題下發布了一篇文章，指出有一種針對base64映像的解決方法（雖然沒有進行過測試）。另外，我不想使用預生成/動態（php + gd）png文件，因爲我的rgb和alpha值可能會有所不同。 – Mikk

-1

您可以一直使用透明度返回到pre-Webkit Safari，IE5，Firefox .9 ...所以很久沒有人使用它了。 http://css-tricks.com/css-transparency-settings-for-all-broswers/

.transparent { 
zoom: 1; 
filter: alpha(opacity=50); 
opacity: 0.5; 
}

當然你也可以通過在你最喜歡的JavaScript庫或通過手個別元素設置這些CSS屬性。因此，作爲你的後備，通常設置你的RBG，然後添加適當的透明度

來源

2012-07-13 19:42:27

跨瀏覽器rgba透明背景，同時保持內容（文本和圖像）不透明

回答

相關問題