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>