Question

我一直在尝试为我的网站创建一个小型的社交媒体栏。由于某种原因，我无法解决我想用来创建精灵的图像无法加载。我还应该提一下，我的背景图像没有显示出类似的问题。

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应用于加号元素。

<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

以及其他每个人。

用作精灵没有加载的背景图像

1 个答案: