css - 用作 Sprite 的背景图像未加载

Question

我一直在尝试为我的网站创建一个小型社交媒体栏。出于某种原因，我无法计算出我想用来创建 Sprite 的图像无法加载。我还应该提一下，我在背景图像不显示方面遇到过类似的问题。

HTML调用是这样的:

<div id="socialbar">
    <div class="plus"><a href="https://plus.google.com/u/0/105252399036646613257/posts">Google Plus</a></div>
    <div class="twitter"><a href="https://twitter.com/DarrenLumber">Twitter</a></div>
    <div class="facebook"><a href="http://www.facebook.com/Dazzla2020">Facebook</a></div>
    <div class="youtube"><a href="http://www.youtube.com/user/dazzla2020">YouTube</a></div>
    <div class="flickr"><a href="http://www.flickr.com/photos/dazzla2020/">Flickr</a></div>
</div>

CSS 看起来像这样:

#socialbar
{
    width: 245px;
    margin: 0px;
    display: inline;
    border: 0px;
}

#socialbar a.plus
{
    display: block;
    float: left;
    height: 32px;
    width: 32px;
    text-indent: -9999px;
    background-image: url('http://www.mediafire.com/conv/9452d5f77f6e5e7e91294b54b9a74d18029cbeae2075ef9d12787e7631f849226g.jpg');
    background-position: 0px 0px;
    margin-left: 5px;
    margin-right: 5px;
}

#socialbar a:hover.plus
{
    background-image: url('http://www.mediafire.com/conv/9452d5f77f6e5e7e91294b54b9a74d18029cbeae2075ef9d12787e7631f849226g.jpg');
    background-position: 0px -32px;
}

#socialbar a.twitter
{
    display: block;
    float: left;
    height: 32px;
    width: 32px;
    text-indent: -9999px;
    background-image: url('http://www.mediafire.com/conv/d2133ecf83fc76b78008ed1357a8fb8213e6c2300c26f6af3b1758c576ed17db6g.jpg');
    background-position: 0px 0px;
    margin-left: 5px;
    margin-right: 5px;
}

#socialbar a:hover.twitter
{
    background-image: url('http://www.mediafire.com/conv/d2133ecf83fc76b78008ed1357a8fb8213e6c2300c26f6af3b1758c576ed17db6g.jpg');
    background-position: 0px -32px;
}

#socialbar a.facebook
{
    display: block;
    float: left;
    height: 32px;
    width: 32px;
    text-indent: -9999px;
    background-image: url('http://www.mediafire.com/conv/df04514676d02be959e52f440b9c10e82d09eefdb82d34fdd336a896be551d026g.jpg');
    background-position: 0px 0px;
    margin-left: 5px;
    margin-right: 5px;
}

#socialbar a:hover.facebook
{
    background-image: url('http://www.mediafire.com/conv/df04514676d02be959e52f440b9c10e82d09eefdb82d34fdd336a896be551d026g.jpg');
    background-position: 0px -32px;
}

#socialbar a.youtube
{
    display: block;
    float: left;
    height: 32px;
    width: 32px;
    text-indent: -9999px;
    background-image: url('http://www.mediafire.com/conv/6de4cbb7ecf8e81a25e0ebe35e2cb82af5859b4b2cb3ac9c3ec2fe8c62348c296g.jpg');
    background-position: 0px 0px;
    margin-left: 5px;
    margin-right: 5px;
}

#socialbar a:hover.youtube
{
    background-image: url('http://www.mediafire.com/conv/6de4cbb7ecf8e81a25e0ebe35e2cb82af5859b4b2cb3ac9c3ec2fe8c62348c296g.jpg');
    background-position: 0px -32px;
}

#socialbar a.flickr
{
    display: block;
    float: left;
    height: 32px;
    width: 32px;
    text-indent: -9999px;
    background-image: url('http://www.mediafire.com/conv/dbab33ccef1c60b2974d10a0323f7bb04f594f3b57468dc1a7be8551eb9d1b176g.jpg');
    background-position: 0px 0px;
    margin-left: 5px;
    margin-right: 5px;
}

#socialbar a:hover.flickr
{
    background-image: url('http://www.mediafire.com/conv/dbab33ccef1c60b2974d10a0323f7bb04f594f3b57468dc1a7be8551eb9d1b176g.jpg');
    background-position: 0px -32px;
}

您也可以在这里找到我的代码: http://jsfiddle.net/Yx8tT/122/
(请注意，我为此使用了另一个主机，因为我网站的主机不允许直接链接到图片等，而不是我的实际网站)

相关网站是: http://www.darrenlumber.co.uk

提前致谢!

Answer 1

您没有将 css 应用于 plus 元素。

<div class="plus"><a href="https://plus.google.com/u/0/105252399036646613257/posts">Google Plus</a></div>


#socialbar a.plus
{
    display: block;
    float: left;
    height: 32px;
    width: 32px;
    text-indent: -9999px;
    background-image: url('http://www.mediafire.com/conv/9452d5f77f6e5e7e91294b54b9a74d18029cbeae2075ef9d12787e7631f849226g.jpg');
    background-position: 0px 0px;
    margin-left: 5px;
    margin-right: 5px;
}

选择器应该是:

#socialbar .plus a

等等。