css - Sprite 回退

Question

我在单个 sprite 图像中包含页面上的许多图像，由于网站的其他要求，这些图像必须包含在单个 sprite 中。

虽然这在大多数浏览器中工作正常，但我在 Opera Mini 上遇到了一个问题，它根本不渲染 Sprite ，只显示整个图像。

是否有任何 CSS 可用于在浏览器无法呈现 Sprite 时提供替代文本？

Answer 1

有点迷茫。 Sprite 不渲染但显示整个图像？您是一次看到所有 Sprite ，还是一个也没有？

您可以对 opera mini(以及渲染未按预期工作的任何其他移动浏览器)使用浏览器检测。

将所需的文本添加到 sprite 元素，并使用大的负文本缩进来隐藏内容。

为不支持的浏览器禁用缩进和背景图像。

所有浏览器.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;
}

移动浏览器.css

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

页面

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