使用webkit-image-set時，如何爲非WebKit瀏覽器提供備用內容？

我正在使用webkit-image-set使我的圖像看起來對於使用Retina Display的用戶來說都非常漂亮。使用webkit-image-set時，如何爲非WebKit瀏覽器提供備用內容？

因爲這個CSS選擇器不會對img標籤的工作，我有一些HTML和CSS，看起來像這樣（在蘋果的WWDC 2012會議上展出）：

<div id="iconImage"> 
</div> 

div#iconImage { 
width:152px; 
height:152px; 
background-image: -webkit-image-set(url(WebsiteIcon.png) 1x, url([email protected]) 2x); 
background-size: 152px 152px; 
margin-left:auto; 
margin-right:auto; 
}

在我的視網膜的MacBook看起來不錯親！當然，不是當我使用Firefox的時候：它只是一個空白點，正如我所期望的那樣。我相信它在IE中查看時也不會顯示任何內容。它也不是很容易訪問。

所以，我能添加到上面的代碼進行：

的圖像（可能是低分辨率版本）顯示在
也許某種文字或替代文字的或東西，使受訪的訪問者更容易訪問。

來源

2012-10-16 bpapa

你不能做對CSS背景（尤其是因爲背景不應該使用語義上有意義的圖像）替代文字的非WebKit瀏覽器，但做回退的背景很簡單：

background-image: url(whatever); 
background-image: -webkit-image-set(url(WebsiteIcon.png) 1x, url([email protected]) 2x);

非WebKit的用戶代理將忽略第二個聲明，而WebKit的將忽略首先是因爲第二覆蓋它。

來源

2012-10-16 04:30:27

完全同意我在這裏以某種方式做了錯誤的事情，但在某種程度上，因爲它適用於iPhone應用程序，無論如何我都是蘋果粉絲男人，我並不在乎。但 - 對於輔助功能 - 如何將一些文本放入與我的背景顏色相同的文本（白色）？ – bpapa

但是，既然你定義了兩次背景圖像，那麼不會驗證嗎？ –

@KobiTate關於定義它兩次沒有任何無效。當然不會比使用-webkit的東西更有效 –

也許你可以創建另一個專門爲非webkit瀏覽器設計的類。

div#iconImage.nonWebkit { 
    background-image: url(WebsiteIconNonWebkit.png); 
}

，然後檢測使用jQuery

if (!$.browser.webkit) { 
    $('#iconImage').addClass('nonWebkit'); 
}

來源

2012-10-16 03:51:32

我剛剛測試過，以確保它可以在Firefox中使用以下jsFiddle http://jsfiddle.net/acBLr/ –

您的CSS將無法使用該JS ...更重要的是，瀏覽器嗅探是這樣的一個壞主意。 –

爲什麼它不工作？請求我自己的知識 –

使用webkit-image-set時，如何爲非WebKit瀏覽器提供備用內容？

回答

相關問題