css精灵的使用

    CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。  在网页访问中,客户端每需要访问一张图片都会向服务器发送请求,所以,访问的图片数量越多,请求次数也就越多,造成延迟的可能性也就越大。
 举例说明:

   合成大图如下:
 
css精灵的使用
 如果想要获取到:如下图片:


css精灵的使用

采用的方式是:

基本的原理,就是利用background-postion的负值来进行调节。
当我们定位于background-position:-50px -50px;时发现图片向左上,移动了,也就以DIV的左上角为中心,图向左移动了50PX,向右也移动了50PX.
 
参考点: 以图片为(0,0)为原点。
css精灵的使用


我借助fireworks 来获取定位的值:



css精灵的使用

宽 高 以及定位的值:

css精灵的使用

代码:
css精灵的使用
显示效果如下:
css精灵的使用
如此简单~~~~~~~




相关文章:

  • 2022-02-04
  • 2022-12-23
  • 2022-12-23
  • 2022-01-24
  • 2021-12-07
  • 2022-12-23
  • 2021-10-13
  • 2021-07-16
猜你喜欢
  • 2022-01-01
  • 2021-07-04
  • 2022-12-23
  • 2021-06-04
  • 2021-05-18
  • 2021-05-29
  • 2021-07-02
相关资源
相似解决方案