当前位置:Gxlcms > css > CSSSprites是什么

CSSSprites是什么

时间:2021-07-01 10:21:17 帮助过:62人阅读

CSS Sprites是一种性能优化技术,是一种将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能;也被称为css 精灵图。

为什么要使用Sprites(精灵图)?

网页通常包含多个图像。这些包括图标,按钮,徽标,相关图片和其他图形。当页面中加载图像时,浏览器向服务器发出HTTP请求。分别加载每个图像需要多次调用HTTP服务器,这可能导致下载时间变慢以及带宽使用率过高。

CSS Sprites会将多个图像组合成一个称为精灵表或拼贴图的单个图像,用户不下载多个文件,而是下载单个文件并通过偏移文件显示必要的图像(或精灵图)。

这样可以减少对服务器的调用、减少呈现网页所需的下载次数,节省带宽并缩短用户端的下载时间,减少网络拥塞。

如何使用CSS Sprites(精灵图)?

因为CSS Sprites是一张多个图像组合成单个图像,在精灵表中多个图像会被放置在网格状图案里,呈现网状分布。

当需要特定图像(精灵图)时,一般会通过CSS background-images属性引用精灵表,在通过CSS background-position属性对其进行偏移定位得到所需的精灵图,然后以像素为单位定义精灵图的大小。

使用Sprites(精灵图)的实例

精灵图表:

代码示例:

html代码:

  1. <ul class="menu">
  2. <li class="firefox"><a href="#">Firefox</a></li>
  3. <li class="chrome"><a href="#">Chrome</a></li>
  4. <li class="ie"><a href="#">Explorer</a></li>
  5. <li class="opera"><a href="#">Opera</a></li>
  6. <li class="safari"><a href="#">Safari</a></li>
  7. </ul>

css代码:

  1. ul.menu {
  2. list-style-type: none;
  3. width: 400px;
  4. }
  5. ul.menu li {
  6. padding:20px 5px;
  7. font-size: 16px;
  8. float: left;
  9. font-family: "Trebuchet MS", Arial, sans-serif;
  10. }
  11. ul.menu li a {
  12. height: 50px;
  13. line-height: 50px;
  14. display: inline-block;
  15. padding-left: 60px; /* To sift text off the background-image */
  16. color: #3E789F;
  17. background:url(Sprites.png) no-repeat; /* As all link share the same background-image */
  18. }
  19. ul.menu li.firefox a {
  20. background-position: 0 0;
  21. }
  22. ul.menu li.chrome a {
  23. background-position: 0 -100px;
  24. }
  25. ul.menu li.ie a {
  26. background-position: 0 -200px;
  27. }
  28. ul.menu li.safari a {
  29. background-position: 0 -300px;
  30. }
  31. ul.menu li.opera a {
  32. background-position: 0 -400px;
  33. }
  34. ul.menu li.firefox a:hover {
  35. background-position: 0 -50px;
  36. }
  37. ul.menu li.chrome a:hover {
  38. background-position: 0 -150px;
  39. }
  40. ul.menu li.ie a:hover {
  41. background-position: 0 -250px;
  42. }
  43. ul.menu li.safari a:hover {
  44. background-position: 0 -350px;
  45. }
  46. ul.menu li.opera a:hover {
  47. background-position: 0 -450px;
  48. }

效果图:

当鼠标悬停到一个精灵图上时:

动态效果:

GIF.gif

总结:以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。

以上就是CSS Sprites是什么的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行