Question

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

的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 sprites没有显示他们的图像

1 个答案: