CSS Sprite 不起作用

Question

我需要在我的 html 页面上嵌入社交网络 sprite，但由于某些原因它们不显示(而链接本身有效)。这是我的 html:

<div class="sprites">
    <a class="instagram" href="http://instagram.com"></a>
    <a class="twitter" href="https://twitter.com"></a>
    <a class="facebook" href="https://fb.com"></a>
    <a class="vk" href="https://vk.com"></a>
    <a class="pinterest" href="https://pinterest.com"></a>
    <a class="youtube" href="https://youtube.com"></a>
</div>

并摆弄 scss:http://jsfiddle.net/zvj89o0o/ 下面是我的 Sprite 的样子:

Answer 1

试试这个:

.youtube, .pinterest, .vk, .facebook, .twitter, .instagram {
    width: 105px;
    height: 105px;
    background: url("path/to/jI86i.png") 0 0 no-repeat;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}