关于css雪碧图sprite

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

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

1.使用场景

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

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

  X纯色背景的按钮

  X动态图片

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

     2.小图片,3-5k

     3.加载量比较大

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

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

2.实现原理

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

  关于css雪碧图sprite

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

  注意:单位,坐标为负值。   

3.实现方式

  ps手动拼图,量少小网站

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

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

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

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

上一篇:gitlab - 解决添加webhook提示Url is blocked: Requests to the local network are not allowed的问题


下一篇:[luogu P3275] [SCOI2011]糖果