Sprite Fallback

Question

我在包含在單個精靈圖像中的頁面上有許多圖像，由於網站的其他需求，這些圖像必須包含在單個精靈中。

雖然這在大多數瀏覽器中工作正常，但我在Opera Mini上沒有渲染精靈並只顯示整個圖像。

當瀏覽器無法呈現精靈時，是否有任何可用於提供文本替代的CSS？

Answer 1

有點困惑。精靈不是呈現，而是顯示整個圖像？你是否一次看到所有的精靈，或者根本沒有？

您可能使用Opera Mini檢測瀏覽器（以及任何其他移動瀏覽器，其渲染不像預期的那樣工作）。

將所需的文本添加到sprite元素，並使用大的否定文本縮進來隱藏內容。

禁用不支持的瀏覽器的縮進和背景圖像。

allbrowsers.css

div.sprite { 
    width:20px; 
    height:20px; 
    background:transparent url(img/mysprites.gif) no-repeat scroll top left; 
    overflow:hidden; 
    text-indent:-5000px; 
} 
#first_sprite { 
    background-position:20px 40px; 
} 

mobilebrowsers.css

div.sprite { 
    background-image:none; 
    text-indent:0; 
} 

頁

<div id="first_sprite" class="sprite">Alternate text</div>