雪碧图(css sprite)
2017-03-17 19:48
225 查看
雪碧图(css sprite)
时机
1.静态图片,不随用户信息的变化而变化2.小图片,图片容量比较小(2k~5k左右)
3.加载量比较大
目的
有效减少http请求数量,加速内容显示原理
控制一个层,可显示的区域范围大小,通过一个窗口,进行背景图的滑动li i{ background: url(xx.png); background-repeat: no-repeat; background-position:0 0; }
雪碧图制作
1.ps手动拼图2.sprite工具自动生成(CssGaga:http://www.99css.com/archieves/1524)
雪碧图定位
Demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /> <title>CSS Sprite</title> <style type="text/css"> *{margin: 0; padding: 0;}/*适配不同的浏览器*/ .cat{width: 100%; background: #f8f8f8; border: 1px solid #bbb; } ul{list-style: none;margin: 5%;} li{display: block; height: 30px; line-height: 30px; overflow: hidden;/*防止元素内容溢出*/ border-bottom: 1px solid #dedede; } li i{background: url(Sprite.jpg); display: inline; height:30px; width: 28px; float: left; margin: 6px 5px 0 0; } li h3{font-size: 14px;font-weight: 400;} .cat-1 i{background-position: 0 0;} .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;} .cat-9 i{background-position: 33px 0;} </style> </head> <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> <li class="cat-9"> <i></i> <h3>其它用品</h3> </li> </ul> </div> </body> </html>
Sprite.jpg:
参考:http://www.imooc.com/learn/93
相关文章推荐
- CSS Sprite雪碧图使用场景-慕课网
- 【HTML+CSS】(2)CSS Sprite雪碧图
- base64,雪碧图CSS Sprite,直接使用图片
- CSS Sprite雪碧图的应用
- 【HTML+CSS】(2)CSS Sprite雪碧图
- 【web前端性能优化】css sprite(图片精灵)-雪碧图实现原理
- compass与css sprite(雪碧图)
- 20150726 CSS Sprite雪碧图应用
- 雪碧的21种新喝法
- 关于CSS sprite 的使用心得。
- 疯狂的雪碧图
- 喝雪碧真的中奖了。。。嘿嘿2Q 运气不是盖的
- css sprite 如何定位的
- 浅谈CSS Sprite和实例解析
- hcSpriteCuter.js:一个雪碧图拆图小工具
- css sprite
- CSS Sprite定位实现
- CSS Sprite(CSS雪碧图)
- !!字体图标(iconfont、Fontello 、雪碧图生成工具。Glyphicons、fontawesome 等)
- CSS Sprites雪碧图技术基础学习指南