css - 雪碧后备

Question

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

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

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

Answer 1

有点迷茫。精灵不是渲染，而是显示整个图像？你是一次看到所有的精灵，还是根本看不到？

您可以将浏览器检测用于 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>