css 属性的背景 url 没有显示图像精灵？

Question

我正在从 w3schools 获取图像，并且正在练习使用图像精灵。我不知道我做错了什么。我尝试创建一个带有图像标签和 div 标签的图像精灵，但这两个选项都不起作用。我不知道我的路径是否错误，但我的图像精灵在一个名为“图像”的文件夹中，我的网站在我的桌面文件夹中。这是我的 html 代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <img src="images/img_navsprites.gif" /> <br></br>
    <img id="home" src="img_trans.gif" alt="home" />
    <div class="img" alt="img"></div>
  </body>
</html>

这是我的 css 代码：

#home {
    width: 46px;
    height: 44px;
    background-image: url("images/img_navsprites.gif");
    background-position: 0 0;
}


.img {
    width: 46px;
    height: 44px;
    background-image: url("images/img_navsprites.gif") 0 0;
}

这张图片是否被视为图片精灵？

这是我的文件结构：

Answer 1

不要将 background-image 应用于 img 标签，就像您对 #home 图片所做的那样

在 HTML 代码中将所有这些元素清空 divs 或 spans，您将应用背景精灵图像，并根据 background-position 值使用使精灵图像的所需部分可见。

Answer 2

回答您的几个问题： “这个图像被认为是图像精灵吗？”我会说是的。多个较小的图像组合在一个图像中。精灵对于减少拉取单个图像而不是多个较小图像的网络调用很有用。

您通常不会使用 <img> 标签来显示精灵。精灵将用作背景图像。 <div ... 中的用法更准确，因为您将 background-image 与 CSS 一起应用。

背景图片的宽度和高度应代表精灵中较小图片的宽度和高度。您还需要一个背景位置来告诉浏览器从哪里开始渲染宽度和高度。

background-position CSS 元素有点误导。它确实从 0,0 开始，这是精灵的左上角。但是，从那里开始，值变为负值而不是正值。

要渲染 sprite 中的第一个房子，您需要在 #home 元素中正确设置 background-position 以及宽度和高度，但您需要将 background-position 移动到 .img 元素。 <div class="img"... 是使用精灵的一种正确方式。

它应该看起来像：

<style>
        .img {
            width: 46px;
            height: 44px;
            background-image: url("images/img_navsprites.gif");
            background-position: 0 0;
        }
</style>

<div class="img"></div>

我之前也提到过 background-position 变为负数而不是正数。这意味着，例如，如果我想渲染 Bottom Right Arrow，您将对位置应用负 X 轴，并对 Y 轴应用负值。

看起来像这样：

<style>
        .img {
            width: 46px;
            height: 44px;
            background-image: url("images/img_navsprites.gif");
            background-position: -91px -45px;
        }
</style>

css 属性 的背景 url 没有显示图像精灵？

my background url for css property is not displaying image sprite?

html

css

image

background-image

css 属性的背景 url 没有显示图像精灵？