Question

我发现这种方法可以将一张具有不同社交图标的图片制作成不同的社交链接，方法是使用x和y图标来定义您想要在链接中显示的图像部分。

我遇到的问题是，一旦我设置了代码，背景图像就不会显示出来。如果有人能够提供他们为什么这个代码不能正常工作的洞察力，那将非常感谢！

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/

代码正在渲染列表，只是背景图像没有显示...

Answer 1

您的锚点正在折叠为0x0，因为它们中没有任何内容。它们不会因为您有背景图像而自动扩展到父级的大小。明确地给它们像li一样的宽度/高度，你得到http://jsfiddle.net/HRHnY/2/

主播的相关CSS：

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

或者，您可以将宽度和高度设置为父级的100％，而不是显式设置它。

Answer 2

Working jsFiddle Demo

a元素，inline以及width和height，由它们内的数据计算。因此，您必须明确设置它们，将此规则添加到CSS：

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

TIP

最好在常规选择器中只编写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;
}

一张图片进入不同的社交链接

2 个答案:

TIP