CSS 精灵未显示其图像

Question

好的，所以我在让 sprite 在我的网站上工作时遇到了问题，所以我决定从头开始重写 w3 sprite 教程，看看我做错了什么。这是我写的代码：

test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <img src="img_navsprites.gif" alt="">
  <img src="img_trans.gif" alt="" id="home"><br><br>
  <img src="img_trans.gif" alt="" id="next">
</body>
</html>

style.css

#home{
  width:46px;
  height:44px;
  background: url(img_navsprites.gif) 0 0;
}
#next{
  width:43px;
  height:44px;
  background: url(img_navsprites.gif) -91px 0;
}

当我在 Chrome 中打开它时，会显示第一张图片，但不会显示单独的图片。我不知道我做错了什么，从每个角度来看，这段代码都应该有效。

Answer 1

如果您仔细查看 W3 上的示例，您会发现您还需要 "img_trans.gif" 才能成为正确的 img 文件。在他们的示例中，它只是一个像素图像。
当您的 'src' 不正确时，IMG 元素显示 'alt' 属性，该属性在您的代码中为空。

CSS 精灵未显示其图像

CSS sprites not displaying their image

html

css

css-sprites