CSS 精灵不工作

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>

和 fiddle 与 scss: http://jsfiddle.net/zvj89o0o/ 下面是我的精灵的样子：

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;
}

Answer 2

它运行良好，但您忘记了（在 fiddle 中）有一个有效的背景 URL。

我尝试使用您在上面的图像 post，效果很好（需要一些调整）：

http://jsfiddle.net/gau66y74/

我指的是这个CSS:

.youtube, .pinterest, .vk, .facebook, .twitter, .instagram {
    width: 125px;
    height: 125px;
    background: url(http://i.stack.imgur.com/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;
}

要修复 HOVER 问题，请使用：

.youtube:hover {
        background-position: -256px -384px;
}

代替：

.youtube {
    background-position: -256px -256px;
    &:hover {
        background-position: -256px -384px;
    }
}

这是一个 fiddle 显示（仅适用于 YouTube 图标）

CSS 精灵不工作

CSS Sprites don't work

css

css-sprites

sprite