本篇文章给大家介绍一下 CSS 精灵图(图片合成技术). 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
CSS 精灵图(雪碧图, 图片合成技术)
1, 什么是 CSS 精灵图(sprite)?
CSS 精灵图 (sprite) 直译为 "CSS 精灵", 也被称为通常被解释为 "CSS 图像拼合","CSS 贴图定位" 或 "CSS 图片精灵","CSS 雪碧图", 是一种网页图片应用处理方式. 其实就是把一个页面涉及到的所有零星图片都包含到一张大图中去, 这样一来, 当访问该页面时, 载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.
2, 使用 CSS 精灵图 (sprite) 的方法
CSS 精灵图 (sprite) 其实就是通过将多个图片融合到一张图里面, 然后通过 CSS background 背景定位技术技巧布局网页背景. 在需要用到图片的时候, 现阶段是通过 CSS 属性 background-image 组合 background-repeat, background-position 等来实现图片的显示.
3, 代码实现:
使用到的精灵图(sprite)
精灵图分析:
html:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>
- </title>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <style>
- *{ margin: 0; padding: 0; } .sprites{ width: 200px; margin: 50px auto;
- } .sprites div{ margin: 5px; } .sprites span{ float: left; width: 20px;
- height:20px; background: url('./images/icon.png');/* 引用精灵图 */ background-size:
- 60px 40px; } .sprites1{ background-position: 0 0; } .sprites2{ background-position:
- -20px 0 !important; } .sprites3{ background-position: 0 -20px !important;
- } .sprites4{ background-position: -20px -20px !important; } .sprites5{
- background-position: -40px 0 !important; }
- </style>
- </head>
- <body>
- <div class="sprites">
- <div>
- <span class="sprites1">
- </span>
- 付款图标
- </div>
- <div>
- <span class="sprites2">
- </span>
- 存款图标
- </div>
- <div>
- <span class="sprites3">
- </span>
- 删除图标
- </div>
- <div>
- <span class="sprites4">
- </span>
- 粘贴图标
- </div>
- <div>
- <span class="sprites5">
- </span>
- 笑脸图标
- </div>
- </div>
- </body>
- </HTML>
效果如图:
本文转载自: https://blog.csdn.net/zjsfdx/article/details/87932322
更多 web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/css/17569.html