CSSSprite技术.pptVIP

第10章 CSS Sprite技术 10.1 什么是CSS Sprite技术 CSS Sprite技术，从其表面含义上讲就是CSS的精灵技术，而CSS的精灵到底是什么呢？实际上CSS的精灵就是图片里的一个个的图标元素，这些图标可以是按钮、标签、logo等等。 如果你有分析网站代码的习惯的话，你会经常可以发现某些HTML所引用的img图片、背景图片所使用的图片是一幅繁杂的图片，它包含各种各样的小图片，它是众多小图片的大杂烩。 CSS Sprite技术听起来很深奥，而其实它实际上就是使用了background-position属性来进行同一个图片使用不同部分来进行显示，或者达到切换图片的效果。 10.2 CSS Sprite的简单应用 #link:hover{ background-position:0px -128px;/*设置背景图片偏移*/ } #link:visited{ background-position:0px -256px; /*设置背景图片偏移*/ } #link:active{ background-position:0px -384px; /*设置背景图片偏移*/ } 10.3 设计热门查询栏 10.3 设计热门查询栏 #frm .l2 .d {background-position:0 -32px; /*设置背景偏移*