0

私たちがliを与えて画像が表示されるいくつかのウェブサイトを見ました：

元。<li>skype</li>

これを与えるだけでスカイプアイコンが表示されます。これは本当に素晴らしいです。これはどのように可能ですか？backgroundFirebugにアクセスしましたが、 CSS内に何も見つかりませんでした。

誰かがこれがどのような目的に役立つのか、そしてなぜ誰かがそれを使うのかを教えてもらえますか？

編集：例として、次のWebサイトを参照してください。

http://www.burakson.com/

このHTMLを参照してください。<a class="s1 btip" target="_blank" href="http://www.facebook.com/boureaque">Facebook</a>

そのHTMLはFacebookアイコンをどのように表示しますか？

4

1 に答える 1

2

後で質問で指定したWebサイトは、:beforeWebフォントを使用しておらず、単純な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
于 2013-01-10T05:47:00.550 に答える