跨瀏覽器W3C標準半透明背景色

要設置一個半透明背景我使用：跨瀏覽器W3C標準半透明背景色

background-color: rgba(0, 120, 180, 0.8);

對於IE，其不支持rgba我使用1x1的具有相同顏色的巴布亞新幾內亞：

background-image: url(http://i53.tinypic.com/2mgtu9e.png);

（demo here）

問題1

我知道有另一種使用過濾器的IE的方法。

此方法是否被認爲符合W3C？

問題2

說我結合20個1x1的PNG圖像到一個單一的精靈。

如何根據精靈中的第7個像素使用此精靈設置元素的背景色？

來源

2011-09-28 Misha Moroshko

有趣的是，人們如何談論「跨瀏覽器兼容性」，他們真的意思是「它在IE中不起作用」。 – Rob

正如其他人所說，沒有IE過濾器不符合W3C。它們也會產生巨大的開銷併產生性能影響。除非我錯誤地將過濾器應用於HTML元素，否則它將應用於該元素中的所有內容，包括其文本。所以你最終也會得到半透明的文字。可能有辦法阻止這種情況的發生，但我沒有遇到它。也有些時候IE過濾器與this article mentions這樣的半透明PNG不兼容。

說到PNG，使用精靈的想法只有在您具有特定的高度或寬度或兩者都有效時纔有效。所以這真的不適合你需要的東西，就像Merianos Nikos說的那樣。平鋪1x1圖像是一個非常可怕的想法。我這樣說是因爲當你這樣做時有性能問題，尤其是在IE6中。雖然IE6可能不是這方面的問題，但平鋪這樣一個小圖像依然會導致性能下降，因爲瀏覽器必須繪製並重繪每一個。 See this StackOverflow entry。

對於這種情況，我會使用類似Modernizr這將使rgba可用於不支持rgba的瀏覽器。在爲rgba和其他一些東西（HTML5 shim，yepnope和添加CSS類）定製下載之後，下載量爲6.1kb。不會讓開發更容易。

更新當我說Modernizr啓用rgba時，我就錯過了。它沒有這樣做，但它會讓你知道在瀏覽器中啓用了rgba。它會將類添加到html標籤中，告訴您瀏覽器的功能。

來源

2011-09-28 14:45:16 hradac

答案＃1

此方法不符合W3C標準。 Internet Explorer使用過濾器的方式不是常規方式。根本不支持W3C規範中的過濾器。這些過濾器是Internet Explorer插件。

答案＃2

沒有辦法使用它們。在精靈中，您只能使用在後臺不重複的圖像。

在示例：假設您有以下精靈

 
x y z
 
r t s
 
u v a

，如果你現在有你喜歡的背景，從你的精靈用圖像T的區域。您可以設置div的最左上角來顯示t圖像，但是當您需要重複背景時，您將從x重新開始。這意味着你將重複從精靈的所有圖像。

來源

2011-09-28 07:21:07

問題1：CSS3please。方框漸變顯示如何使用MS過濾器。

檢查是否有效：W3C CSS validator。我得到的錯誤，所以我想這不是有效的CSS

來源

2011-09-28 07:27:00 frequent

這就是我在我的回答中所說的。 IE篩選器是CSS的插件。這意味着不是常規的CSS規則，因此對於CSS –

無效。你回答得更快:-) – frequent

跨瀏覽器W3C標準半透明背景色

回答

相關問題