你的位置:首页 > 网页设计

[网页设计]CSS 「Sprite」雪碧图应用


  在写网页过程中,会遇到这种需要多个图标展示:

  唯品会导航栏

  如上图中的「女装」文字左边的图标。容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度。比这更优的解决方案是:雪碧图sprite。

  所谓雪碧图就是把我们所需要的所有小图片用CSS sprite或者PS工具拼接成一张大图片,然后通过元素的background-image、background-positon属性完成图片的定位。

  为此,我做了个Demo。

  

   在学习的过程中,遇到了背景图片定位的问题,也就是background-position属性使用以及如何在这张大图片中定位到要显示的小图标。

   问题简化就是:

   

  答案是把这张图片设置为div的背景图。然后移动图片使图片3在div区域显示。

  假设4张小图大小一样,都是25x25像素,div也是25x25像素。因为把大图片设置为div的背景图时,默认图片的左上角顶点是与div区域的顶点重合的,所以要将「小图片3」向上垂直移动,水平方向保持不变。因此设置background-position:0px,-25px;(图片像素的定位可用CSS sprite工具查看)。

  就是这么个简单的问题,但我之前出于两点理解失误始终理解不了为什么像素值是负数。比如一个无序列表<ul>中每一项的<li>都设置背景图片为这个大图片,当显示的时候,就像在一张完整的图片每个区域开个洞,各自看这张大图的局部,我这样理解就解释不了两个<li>怎么都显示一样的小图片。我之所以有这样的理解是因为我忽略了每个li独自拥有这张大图,然后再移动这张大图,想显示哪个区域就显示哪个区域。再,为什么像素值是负数呢?我网上搜,发现也有不理解的网友认为直接把这个像素值为负数记住就行,有网友认为是div顶点动,图片不动,但也解释不通。后来查到的两句话点醒了我:

  • 怎么说呢,图片定位技术,实际上相当于开了一个窗户,你透过窗户看外面的景色。你的窗户大小是不会变的,但是景色却能改变位置,整张雪碧图,就是一个大的风景,通过控制他的定位,你就可以看到不同的风景,所以,可以先做适合大小的图片,然后再整合到一起去,通过负定位进行上移或左移,达到能让这个窗户显示自己正确背景的位置。
  • 以图片左上角为原点,整张图片向左和向上移为负,整张图片向右和向下移为正。

  有错误之处,还请指正。

  参考资料:

  W3C CSS背景属性

  显示切图的一部分作为背景显示

  CSS sprite在线工具

  本文Demo下载:

  模仿淘宝导航条(提取码:e0f5)