CSSSprite技术.pptVIP

  • 1
  • 0
  • 约3.55千字
  • 约 14页
  • 2017-06-14 发布于北京
  • 举报
第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; /*设置背景偏移*

文档评论(0)

1亿VIP精品文档

相关文档