0

x アイコンと y アイコンを使用して、リンクで取り上げる画像のセクションを定義することで、1 つの画像にさまざまなソーシャル アイコンを配置してさまざまなソーシャル リンクを作成するこの方法を見つけました。

私が抱えている問題は、コードを設定すると背景画像が表示されないことです。このコードが正常に機能しない理由について誰かが洞察を提供できれば、大歓迎です!

CSS:

aside .social {
    margin-top: 40px;
}

.social ul {
    list-style-type: none;
    margin: 0;
}
.social li {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 4px 6px 0;
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    *display:inline;
    line-height: 20px;
}
.social li:nth-child(8n+0) {
    margin-right: 0;
}
.social li a, .social li a:active, .social li a:visited {
    opacity: 0.5;
    -moz-transition: opacity .15s ease-in-out;
    -o-transition: opacity .15s ease-in-out;
    -webkit-transition: opacity .15s ease-in-out;
}
.social li a:hover {
    opacity: 1;
}

.social li.facebook a { background: url(http://static.tumblr.com/csqo1yp/4uimntnjk/social.png) 0 0; }
.social li.twitter a { background: url(http://static.tumblr.com/csqo1yp/4uimntnjk/social.png) -24px 0; }
.social li.youtube a { background: url(http://static.tumblr.com/csqo1yp/4uimntnjk/social.png) -48px 0; }
.social li.instagram a { background: url(http://static.tumblr.com/csqo1yp/4uimntnjk/social.png) -72px 0; }
.social li.google a { background: url(http://static.tumblr.com/csqo1yp/4uimntnjk/social.png) -96px 0; }
.social li.flickr a { background: url(http://static.tumblr.com/csqo1yp/4uimntnjk/social.png) -120px 0; }
.social li.linkedin a { background: url(http://static.tumblr.com/csqo1yp/4uimntnjk/social.png) -144px 0; }

HTML:

<h1>Find Us On</h1>
    <div class="social">
        <ul>
            <li class="facebook"><a href="{text:Facebook URL}" target="_blank"></a></li>
            <li class="twitter"><a href="http://www.twitter.com/{text:Twitter Username}" target="_blank"></a></li>
            <li class="youtube"><a href="{text:YouTube URL}" target="_blank"></a></li>
            <li class="google"><a href="{text:Google Plus URL}" target="_blank"></a></li>
            <li class="instagram"><a href="http://www.instagram.com/{text:Instagram Username}" target="_blank"></a></li>
            <li class="flickr"><a href="{text:Flickr URL}" target="_blank"></a></li>
            <li class="linkedin"><a href="{text:Linkdin URL}" target="_blank"></a></li>
        </ul>
    <div>

便宜上、JSFiddle も作成しました: http://jsfiddle.net/HRHnY/

コードはリストをレンダリングしています。背景画像が表示されていないだけです...

4

2 に答える 2

1

コンテンツがないため、アンカーは 0x0 に折りたたまれています。背景画像があるからといって、親のサイズに自動拡張されません。li のような幅/高さを明示的に指定すると、http://jsfiddle.net/HRHnY/2/が得られます。

アンカーに関連する CSS:

display: block;
width: 24px;
height: 24px;

または、幅と高さを明示的に設定する代わりに、親の 100% に設定することもできます。

于 2013-06-04T03:16:24.720 に答える
1

動作中のjsFiddleデモ

a要素であるinlineおよび それらのおよびwidthはheight、それらの中のデータによって計算されます。したがって、明示的に設定する必要があり、次のルールを CSS に追加します。

.social a {
    display: inline-block;
    width: 24px;
    height: 24px;
}

ヒント

background-image一般的なセレクターで一度だけ書く方が良いです:

.social a {
    background: url(http://static.tumblr.com/csqo1yp/4uimntnjk/social.png);
}

そしてbackground-position、要素ごとに変更するだけです：

.social li.facebook a {
    background-position: 0 0;
}

.social li.twitter a {
    background-position: -24px 0;
}
于 2013-06-04T03:20:39.883 に答える