CSS sprites(精灵图), 也被称为 "CSS 图像拼合","CSS 贴图定位" 或 "CSS 图片精灵","CSS 雪碧图", 是一种网页图片应用处理方式: 将多个图像组合成单个图像文件以在网站上使用的方法, 以提高性能.
CSS sprites(精灵图)其实就是把一个页面涉及到的所有零星图片都包含到一张大图中去, 这样一来, 当访问该页面时, 载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.
CSS sprites 怎么定位? 怎么用?
CSS sprites(精灵图)其实就是通过将多个图片融合到一张图片文件中, 然后通过 CSS background 背景定位技术技巧布局网页背景. 在需要用到图片的时候, 现阶段是通过 CSS 属性 background-image 组合 background-repeat, background-position 等来实现图片的显示.
使用时, 需要使用 CSS 的 background-image,background-repeat 和 background-position 属性进行背景定位, 其中最关键的是使用 background-position 属性精确地定位.
在使用精灵图之前, 我们需要知道精灵图中各个图标的位置.
从上面的图片不难看出 Sprites(精灵图)中各个小图标 (icon) 在整张 Sprites(精灵图)的起始位置, 例如第一个图标 (裙子) 在精灵图的起始位置为 x:0,y:0, 第二个图标 (鞋子) 在精灵图的起始位置为 x:0,y:50px, 第三个图标 (足球) 在精灵图的起始位置为 x:0,y:100px, 依次类推可以得出各个图片相对于精灵图的起始位置.
代码示例:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <style>
- .box { width: 600px; height: 300px; border: 3px solid #ccc; background-color:
- #8064A2; } span { display: inline-block; width: 25px; height: 25px; border:
- 3px solid #ccc; background-image: url(CSS/img/sidebar.PNG); background-repeat:
- no-repeat; margin: 5px; } .icon1 { background-position: 0 0; } .icon2 {
- background-position: -40px 0; } .icon3 { background-position: 0 -25px;
- } .icon4 { background-position: -40px -25px; }
- </style>
- </head>
- <body>
- <div class="box">
- <span class="icon1">
- </span>
- <span class="icon2">
- </span>
- <span class="icon3">
- </span>
- <span class="icon4">
- </span>
- </div>
- </body>
- </HTML>
效果图:
CSS sprites(精灵图)的作用
可以减少对服务器的调用, 减少呈现网页所需的下载次数, 节省带宽并缩短用户端的下载时间, 减少网络拥塞.
可以很好地减少网页的 http 请求, 从而大大的提高页面的性能, 这也是 CSS Sprites 最大的优点, 也是其被广泛传播和应用的主要原因;
CSS Sprites 能减少图片的字节, 曾经比较过多次 3 张图片合并成 1 张图片的字节总是小于这 3 张图片的字节总和.
解决了网页设计师在图片命名上的困扰, 只需对一张集合的图片上命名就可以了, 不需要对每一个小元素进行命名, 从而提高了网页的制作效率.
更换风格方便, 只需要在一张或少张图片上修改图片的颜色或样式, 整个网页的风格就可以改变. 维护起来更加方便.
更多 web 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/15992.html