css-Sprites使用案例

css sprite(css精灵),被解释为图像拼合活css贴图定位。

css sprites其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景。这样做的好处也是显而易见的,因为图片多的话,会增加http的请求,无疑促使了网站性能的减低,特别是图片特别多的网站,如果能用css sprites降低图片数量,带来的将是速度的提升。

1.效果图

css-Sprites使用案例

2.代码

   1).html部分

    css-Sprites使用案例

   2).css部分

     css-Sprites使用案例

    3.素材图片(自行下载自行引入)

      css-Sprites使用案例