Sprite回退

Question

我有一个包含在一个单一的精灵图像页面上的图像数量，这些图像必须包含在一个单一的精灵由于网站的其他要求。

虽然这在大多数浏览器中都工作得很好，但我在Opera Mini上遇到了一个问题，它根本不渲染精灵，而只是显示整个图像。

当浏览器无法呈现sprite时，有没有什么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>