Question

嗨，我在使用这个精灵工作时遇到了一些麻烦。背景图像永远不会显示，只显示链接文本。我试图使用直接路径到图像，http：// ..，但它仍然无法正确显示。我很感激帮助。

CSS：

    #social a {
      text-indent: -9000px;
      display: block;
      background-repeat: no-repeat;
    }

   #youtubelink a {
      background-image: url(social-btns.png);
      background-position: 0px 0px;
      width:46px;
      height:43px;
   }
   #youtubelink a:hover {
      background-position: 0px -43px;
   }
   #googlelink a {
      background-image: url(social-btns.png);
      background-position: 46px 0px;
      width:46px;
      height:43px;
   }
   #googlelink a:hover {
      background-position: 46px -43px;
   }
   #facebooklink a {
      background-image: url(social-btns.png);
      background-position: 92px 0px;
      width:46px;
      height:43px;
   }
   #facebooklink a:hover {
      background-position: 92px -43px;
   }

HTML：

    <div id="social" align="right">

       <a id="youtubelink" href="#">Youtube</a>

       <a id="googlelink" href="#">Google</a>

       <a id="facebooklink" href="#">Facebook</a>

    </div>

Answer 1

你有锚元素的id，你选择它作为它们的孩子。你应该这样做：

a#facebooklink

您的使用方式：

#facebooklink a

它会认为锚是#facebooklink的孩子，你必须改变所有的SELECTORS。

Answer 2

而不是：

#youtubelink a {
  // my css rules

}

应该是：

a#youtubelink {
      // my css rules
   }

这同样适用于您的所有三个社交链接。

Answer 3

那是因为你的CSS错了。 #youtubelink a表示内的锚标记，其ID为“youtubelink”。你想要的是一个＃youtubelink

CSS图像精灵不显示背景图像

3 个答案: