0

我发现这种方法可以通过使用 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/

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

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 回答