CSS Sprite雪碧图应用

时间:2022-07-02 09:01:12

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

  CSS Sprite雪碧图应用

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

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

  为此,我做了个Demo。

  CSS Sprite雪碧图应用

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

   问题简化就是:

   CSS Sprite雪碧图应用

  答案是把这张图片设置为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) 

 

分隔线

background-position属性

  1.在使用关键字和百分比值的情况下,设定的值同时应用于元素和背景图片。换句话说,如果设定了33% 33%,则图片水平33%的位置与元素水平33%的位置对齐。垂直方面也一样。例如,background-position:center center;设定图片中心点与元素中心点重合,然后再向各个方向重复。(把一张图片放好,再在水平和垂直方向上重复。)

  2.像素之类的绝对单位数值就不一样了。要是用像素单位来设定位置,那么图片的左上角会被放在距离元素左上角指定位置的地方。

  3.有意思的是,还可以使用负值。这样就可以把图片的左上角定位到元素外部,从而在元素中只能看到部分图片。