关于css雪碧图sprite

天气转凉了，又开始贪恋暖暖的被窝了。

早上不想起床的时候在被窝里看了有关于雪碧图的视频。

 

1.使用场景

　　V导航条，登录框img标签多次载入，性能低

　　X大图banner按需加载，如果做成雪碧图一次加载就会载入比较久

　　X纯色背景的按钮

　　X动态图片

　　总结：1.静态图片，不随用户信息变化而改变

　　　　　2.小图片，3-5k

　　　　　3.加载量比较大

　　优点：有效减少http的请求数量，加速内容显示

　　缺点：1.内存缺陷；2.页面缩放有暴露风险；3.对爬虫不友好

 

2.实现原理

　　同一张背景图，改变background-position，调整x轴和y轴从而改变背景图可视的区域

　　

　　如图，需要显示裙子时background-position:0 0;  显示高跟鞋时background-position:0 -24px;  显示窗帘时background-position:-41px 0;

　　注意：单位，坐标为负值。　　　

 

3.实现方式

　　ps手动拼图，量少小网站

　　雪碧图生成工具，有在线生成

 

一边看视频一边敲代码练习，总是可以把标注30min的视频延长至2hour

可能是坐姿有问题，常常肩膀疼背疼，太久ps的时候也会这样

恩，虽然不饿，但是是时候下楼吃个饭了，下午继续

 

转载于:https://www.cnblogs.com/willYKYao/p/5956105.html