详解CSS Image Sprites(CSS 图片拼合技术)——w3cdream|前端学习-开发

'I'm W3cdream,创造',前·所·未·有
详解CSS Image Sprites(CSS 图片拼合技术)

发布作者:萧强   发布时间:2014-05-13   阅读次数:6575

摘要:CSS Image Sprites 也叫css图片精灵, 它是一个集合的图片合成一个单一的图片。 它有什么优点呢: 1. 利用CSS Sprites能很好地减少了网页的http请求,从而大大的提高了页面的性能,这也是

CSS Image Sprites也叫css图片精灵,它是一个集合的图片合成一个单一的图片。

它有什么优点呢:

1.利用CSS Sprites能很好地减少了网页的http请求,从而大大的提高了页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;

CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

2.解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。

更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。 

CSS Sprites是如此的强大,但是也存在一些不可忽视的缺点,如下:

1.在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好足够的空间,防止板块内出现不必要的背景;这些还好,最痛苦的是在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂;

2.CSS Sprites在开发的时候比较麻烦,你要通过photoshop或其他工具测量计算每一个背景单元的精确位置,这是针线活,没什么难度,但是很繁琐;幸好腾讯的鬼哥用ADOBE AIR开发了一个CSS Sprites 样式生成工具,虽然还有一些使用上的不灵活,但是已经比photoshop测量来的方便多了,而且样式直接生成,复制,拷贝就OK!

3.CSS Sprites在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的css,如果在原来的地方放不下,又只能(最好)往下加图片,这样图片的字节就增加了,还要改动css。

下面介绍图片精灵一个简单的例子:


这个本来是三张图片我们把它合成了一张图片(img_navsprites.gif)

但是我们怎么获取这其中的三个部分呢

下面给出css代码

<style>
        #home { height:44px; width: 46px; }
        #home { background: url('sprite.png') 0 0; }

        #prev { height:44px; width: 43px; }
        #prev { background: url('sprite.png') -47px 0; }

        #next { height:44px; width: 43px; }
        #next { background: url('sprite.png') -91px 0; }
    </style>
html代码
<div id="home"></div>
  <div id="prev"></div>
    <div id="next"></div>
这样三个div中就会有特定的图像如下图所示:



如需转载请注明出处:W3C梦想站


常用昵称:萧强,全端布道者

姓名:“刘晓强”,W3CDream创始人,目前就职于易点付。专注于web前端和移动端方面知识的研究,熟练掌握photoshop和AI,喜爱Flat UI设计和Metro UI风格,熟练掌握CSS3+HTML5技术、LESS CSS和Sass CSS,还有jQuery框架方面及一些前端框架bootstrap响应式设计等。新浪微博
友荐云推荐

CSS3直通车

热点文章

新闻资讯

标签云

友情赞助