如何在里面給出名字並顯示圖片？

Question

我看過一些網站，我們給李，圖像顯示：

防爆。 <li>skype</li>

只需給出這個skype圖標就可以了。 這真是太神奇了。 這怎么可能？ 我進入Firebug並沒有在CSS中找到任何background 。

任何人都可以告訴你這個服務的目的是什么，以及為什么有人會這樣做？

編輯：舉個例子，請看這個網站：

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; line使內部文本不可見。

對於每個圖標，都有這樣的樣式：

.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