CSS-sprites,又叫精灵图
欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~
概念:CSS-sprites,又叫精灵图,也是CSS图像拼合或者CSS贴图定位
CSS-sprites拼合
选择合适的图像素材去拼合到一张图片上,再、利用定位将图像在网页中渲染出来
- 一般小素材或者
icon
类素材或者比较少改动的图片适合拼合为CSS sprites - 一般大图像或者网页背景不适合拼合为CSS sprites,网络带宽不好的情况下,访问大图的拼合图像,加载时间需要更长
- 推荐:一般最好将尺寸大小差不多的品何在一张图片上,这样也会有利于开发者计算定位,降低出错率,提高效率
CSS-sprites优点和缺点
优点:
- 将众多小图像拼合,一次性加载,减少http请求,提高网站性能
- 减少图片文件数量,减少命名太多的困扰,对开发者友好,降低出错率,提高效率
缺点:
- 在做图片拼合的时候,需要在页面中留有合适的空间,需要精确测量计算位置,会很繁琐,当然现在也有对应的自动拼合且产生定位代码的软件
- 不利于维护,当CSS-sprites上的一个图像需要改动时,往往需要改动其他的图像的CSS代码,这就要在制作CSS sprites的时候就要考虑这种图片以后改动会不会很频繁,如果很频繁,可以不放在拼合图像中
CSS-sprites例子
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
| <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,minimal-ui, user-scalable=no"/> <style> .sprites div { margin: 5px; } .sprites span { float: left; width: 20px; height: 20px; background-image: url(sprite.png); background-size: 60px 40px; } .sprites1{ background-position: 0 0; } .sprites2{ background-position: -20px 0; } .sprites3{ background-position: 0 -20px; } .sprites4{ background-position: -20px -20px; } .sprites5{ background-position: -40px 0; } .sprites6{ background-position: -40px -20px; } </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><span class="sprites6"></span>编辑图标</div> </div> </body> </html>
|
然后快去看看执行结果吧: