Question

我有一些使用精灵的代码，它看起来像一个水平导航栏。我的问题是：对于我在下面显示的代码，这种方法是否真的导致最终用户下载png图像8次或只是一次。

如果它实际上是一次，有没有更好的方法来做到这一点？

CSS代码

#facebook, #twitter, #linkedin, #googleplus {
    width: 64px;
    height: 64px;
    display: inline-block;
}

#facebook {
    background: url("images/sprite.png") 0 0;
}

#twitter {
    background: url("images/sprite.png") -64px 0;
}

#linkedin {
    background: url("images/sprite.png") -128px 0;
}

#googleplus {
    background: url("images/sprite.png") -192px 0;
}

#facebook:hover {
    background: url("images/sprite.png") 0 -64px;
}

#twitter:hover {
    background: url("images/sprite.png") -64px -64px;
}

#linkedin:hover {
    background: url("images/sprite.png") -128px -64px;
}

#googleplus:hover {
    background: url("images/sprite.png") -192px -64px;
}

HTML代码：

<nav>
    <a id="facebook" href="https://www.facebook.com"></a>
    <a id="twitter" href="https://www.twitter.com"></a>
    <a id="linkedin" href="https://www.linkedin.com"></a>
    <a id="googleplus" href="https://plus.google.com"></a>
</nav>

Answer 1

请求只会发生一次，图像将被缓存。图像将再次重新绘制，但不会通过请求服务器。它仅向服务器请求一次。但是在主类或单个实例中使用url()始终是一个好习惯：

#facebook, #twitter, #linkedin, #googleplus {
  background: url("images/sprite.png");
}

此外，最好单独使用background-position，而不是background，而且您也不需要在background: url()中再次使用:hover。

Answer 2

它只能下载一次，这是使用CSS精灵表的主要原因，如果你为每个图标提供一个图像，它只会下载一次，只有一个HTTP请求而不是8个HTTP请求正常和悬停状态。

不，这就是它的实施方式，你正确地做到了。

资源：

https://css-tricks.com/css-sprites/
http://www.w3schools.com/css/css_image_sprites.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS

修改如Praveen Kumar所述，您只需为所有相应规则编写url()一次，并background-position根据您的图像水平或垂直移动图像

精灵与html和CSS

2 个答案: