Css 背景图像与html相同：为什么？

我一直在尝试剖析behance.net网站上的一些css。我已经在chrome inspector中彻底查看了它，但有些事情我就是不明白

在顶部的导航栏上，有一个文本，上面写着“发现”、“画廊”、“作业”，它写在div

class=“nav text”

中，但也有包含背景图像的class

nav sprite

nav-sprite {
background: url("http://assets.behance.net/img/sprites/nav.png?cb=1056284268") no-repeat;
display: block;
text-indent: -9999px;
}

这里的背景url指向一个png，该png具有与html相同的文本，但在一个大图像中。这里是黑色背景。首先，它的分辨率非常低；第二，如果同样的东西都是用html编写的，为什么还会有呢？

---

谢谢

由于IE6仍在使用，并且（正确地）不支持自定义字体，因此允许使用自定义字体进行渲染

---

不过，为了正确地回答这个问题，我们的想法是HTML布局在没有任何样式的情况下仍然应该具有语义意义，无论是出于可访问性还是回退目的。这可以确保，如果完全支持，则使用更丰富的元素替换菜单中的项目。

由于IE6仍在使用且不（正确地）支持自定义字体，因此允许使用自定义字体正确渲染

---

不过，为了正确地回答这个问题，我们的想法是HTML布局在没有任何样式的情况下仍然应该具有语义意义，无论是出于可访问性还是回退目的。这可以确保，并在完全支持的情况下使用更丰富的元素替换菜单中的项目。

由于字体的原因，它使用图像而不是文本。文本缩进：-9999px设置页面外的文本，导航精灵上也有类似CSS的内容：

background-position: -300px 0;
height: 14px;
width: 75px;

这些设置了要显示的图像部分

---

人们放置文本的原因是出于搜索引擎的目的，如果css被关闭

由于字体的原因，它使用图像而不是文本。文本缩进：-9999px设置页面外的文本，导航精灵上也有类似CSS的内容：

background-position: -300px 0;
height: 14px;
width: 75px;

这些设置了要显示的图像部分

---

人们放置文本的原因是出于搜索引擎的目的，如果css被关闭

HTML文本仅适用于搜索引擎机器人或基于文本的浏览器，类似于Lynx（或不支持CSS的浏览器）。由于

文本缩进：-999px在您引用的样式声明中。相反，您将看到
背景图像
中的精灵，该精灵由特定导航项目的类指定。例如：

.nav-sprite-jobs {
    background-position: -269px 0;
    height: 11px;
    width: 30px;
}

HTML文本仅适用于搜索引擎机器人或基于文本的浏览器，类似于Lynx（或不支持CSS的浏览器）。由于
文本缩进：-999px在您引用的样式声明中。相反，您将看到
背景图像
中的精灵，该精灵由特定导航项目的类指定。例如：

.nav-sprite-jobs {
    background-position: -269px 0;
    height: 11px;
    width: 30px;
}

谢谢我没有注意到我看到的不是html，而是图像。现在完全有道理了！谢谢我没有注意到我看到的不是html，而是图像。现在完全有道理了！