0

我一直在尝试剖析 behance.net 网站上的一些 CSS。我已经在 chrome 检查器中非常彻底地查看了它，但有些东西我就是不明白。

在顶部导航栏上，有“发现”、“画廊”、“工作”的文字，它写在 div 中，class="nav-text"但它也有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，它的文本与用 html 编写的文本相同，但在一个大图像中。这里是黑色背景。首先，它的分辨率非常低。其次，为什么即使这些相同的东西都写在html中，为什么还会出现？ 背景网址图片截图

谢谢！

4

3 回答 3

2

由于字体，它很可能使用图像而不是文本。text-indent: -9999px 将文本设置为页面外，并且导航精灵上也有类似 CSS：

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

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

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

于 2012-09-25T15:44:50.763 回答
1

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

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

于 2012-09-25T15:42:04.463 回答
0

HTML 文本仅适用于搜索引擎机器人或基于文本的浏览器，类似于 Lynx（或没有 CSS 支持的浏览器）。text-indent: -9999px;由于在您引用的样式声明中，您不会看到它。相反，您将看到 中的精灵background-image，由特定导航项的类指定。例如，

.nav-sprite-jobs {
    background-position: -269px 0;
    height: 11px;
    width: 30px;
}
于 2012-09-25T15:45:02.840 回答