什么是css sprites?
css sprites:精灵图(雪碧图):把一堆小图片整合在一张大图上,通过背景图片相关设置(背景图片、背景图是否重复、背景图定位),显示图片,减轻服务器对图片的请求数量
css sprites优点:
1、减少网页的HTTP请求,提高页面性能
2、图片命名上的困扰
3、更换风格方便
css sprites缺点:
1、必须限定容器大小,符合背景图片元素的位置,需要计算
2、维护比较麻烦
css sprites使用步骤:
1、制作一张具有多状态的拼合图片,需要按照一定规律处理
2、给要显示背景的盒(一个固定尺寸,宽width、高height),以背景的方式加载,让其局部显示
3、通过背景图定位(background-position)控制不同的显示状态
pixabayhttps://www.wode007.com/sites/73237.html wallhavenhttps://www.wode007.com/sites/73236.html
css sprites应用实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雪碧图实现原理</title> </head> <style> ul,h3{ margin: 0; padding: 0; } h3{ display: block; margin: 0; padding: 0; } .cat{ position: relative; width: 150px; background-color: #f8f8f8; border: 1px solid #bbb; } li{ z-index: 2; position: relative; display: block; height: 31px; line-height: 31px; overflow: hidden; margin: 1px 10px 0; vertical-align: bottom; border-bottom: 1px solid #dedede } li:hover{ background-color:#666666; } li h3{ font-size: 13px; font-weight: 400; } li i{ display: inline; float:left; margin: 3px 10px 0 0; height: 24px; width: 30px } /* 在这里补充雪碧图的样式 */ li>i{ background:url(‘http://img.mukewang.com/539a950e00015ba500710200.jpg‘); } .cat-2>i{ background-position:0 -24px; } .cat-3>i{ background-position:0 -48px; } .cat-4>i{ background-position:0 -72px; } .cat-5>i{ background-position:0 -96px; } .cat-6>i{ background-position:0 -120px; } .cat-7>i{ background-position:0 -144px; } .cat-8>i{ background-position:0 -168px; } </style> <body> <div class="cat"> <ul> <li class="cat-1"><i></i><h3>服装内衣</h3></li> <li class="cat-2"><i></i><h3>鞋包配饰</h3></li> <li class="cat-3"><i></i><h3>运动户外</h3></li> <li class="cat-4"><i></i><h3>珠宝手表</h3></li> <li class="cat-5"><i></i><h3>手机数码</h3></li> <li class="cat-6"><i></i><h3>家电办公</h3></li> <li class="cat-7"><i></i><h3>护肤彩妆</h3></li> <li class="cat-8"><i></i><h3>母婴用品</h3></li> </ul> </div> </body> </html>