jquery - 如何在 li 中命名并显示图像？

Question

我见过一些网站，我们给 li 并显示图像:

例。 <li>skype</li>

只要给出这个，Skype 图标就会出现。这真是太神奇了。这怎么可能？我进入 Firebug 并没有找到任何 background在 CSS 中。

谁能告诉我这有什么用，为什么有人会用它？

编辑:例如，请参阅此网站:

http://www.burakson.com/

并查看此 HTML:<a class="s1 btip" target="_blank" href="http://www.facebook.com/boureaque">Facebook</a>

该 HTML 将如何显示 facebook 图标？

Answer 1

你后来在问题中指定的网站没有使用 :before 或网络字体的东西，它只是简单的 css:

.head-social ul li a {
    background: transparent url('../images/socials.png') no-repeat top left;
    height: 28px;
    width: 28px;
    display: block;
    text-indent: -9999px;
    outline: 0;
}

background 行设置图标图像，text-indent: -9999px; 行使里面的文本不可见。

对于每个图标，都有这样的样式:

.head-social ul li a.s1 {
    background-position: 0 0;
}

.head-social ul li a.s2 {
    background-position: -30px 0;
}

为每个图标元素覆盖 background-position。

延伸阅读:

1. > https://developer.mozilla.org/en-US/docs/CSS/text-indent
2. > https://www.google.com/search?q=CSS+sprite