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

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

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的时候也会这样

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

关于css雪碧图sprite的更多相关文章

  1. 使用compass自动合并css雪碧图(css sprite)

    本文转载自: 使用compass自动合并css雪碧图(css sprite)

  2. CSS Sprite、CSS雪碧图应用实例

    CSS Sprites技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”, ...

  3. Css雪碧图

    Css雪碧图: CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. 原理 ...

  4. css中雪碧图(sprite)的使用及制作方法

    雪碧图(sprite)是减少请求次数的有效手段,其原理是把多张图片进行合成,使用时通过css进行定位. 1.先看一下雪碧图 没有使用雪碧图时图标是这样一个个的单独文件: 合成雪碧图后是这样拼在一起的一 ...

  5. 前端优化:css雪碧图实践应用详解

    一 为什么需要使用雪碧图 二CSS雪碧图原理及应用 前端是接近用户体验的一个项目组成部分,合适的优化能够大大减少网页响应时间,合理的资源加载自然成为了工作中的要务,现在就结合实例讲解到底什么是css雪 ...

  6. CSS雪碧图(精灵图)使用

    1:CSS雪碧图:CSS雪碧图 即 CSS Sprites,也有人叫它CSS精灵图. 2:雪碧图的由来:一个网站的页面需要大量的小图片或者小图标,但是大量的图片如果放在服务器上,每次当打开网站并且向服 ...

  7. css雪碧图实现数字切换

    vue中 css 雪碧图应用及数字切换demo 1. CSS Sprites一般只能使用到固定大小的盒子(box)里,这样才能够遮挡住不应该看到的部分. 2.使用css雪碧图的优点: 利用CSS Sp ...

  8. css雪碧图(精灵图)与字体图标的介绍以及对比

    css雪碧图(精灵图)与字体图标的介绍以及对比 设想一个实际场景:在一个页面为了展示,我们放置了很多独立的小图片,浏览器在显示页面的时候,就需要向服务器就会发送很多请求,来获取并加载这些小图片,但是这 ...

  9. css sprite,css雪碧图生成工具V3.0更新

    V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS spr ...

随机推荐

  1. SQLServer2008设置开启INTERNET远程连接

    SQL Server 2008默认是不允许远程连接的,sa帐户默认禁用的,如果想要在本地用SSMS连接远程服务器上的SQL Server 2008,需要做两个部分的配置: 使用sa账户登录SQL Se ...

  2. LVM 创建分区扩展分区记录

    LVM 原理   图片来自百度百科   测试环境centOS 7                 LVM version:     2.02.115(2)-RHEL7 (2015-01-28)     ...

  3. nrpe 在ubuntu上安装遇到的问题

    Nagios Linux客户端需要安装NRPE进行数据收集,如果在Ubuntu系统下安装过程中遇到下面的错误提示:checking for SSL libraries... configure: er ...

  4. c#与java webservice调用问题

    问题描述一: c#调用java写的websrevice,对方接收到的参数与实际传的值不一致,返回的时候值也获取不到,为null. 该参数为普通的string类型,因此不存在类型转换的问题. 处理: 使 ...

  5. 【WinForm】C# 发送Email

    发送Email  的条件 1.SmtpClient SMTP 协议    即 Host 处理事务的主机或IP地址     //smtp.163.com      UseDefaultCredentia ...

  6. python写的百度贴吧相册下载

    突然想搞个这样的工具,写来写去都不知道在干嘛了,本来两个文件,现在整合在一起了. 乱得不行,懒得整理了,能用就行. 下载部分用了多线程,但是下载一个文件还是用的单线程,也就是没管http头的range ...

  7. POJ 3026 Borg Maze

    Borg Maze Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7998   Accepted: 2675 Descrip ...

  8. visualsvn server 报错 can't read file "current":End of file out

    需要删除文件:Repositories\ProjectName\db\revprops\X 需要修改文件:repository/db/txn_current.repository/db/current ...

  9. UWSGI安装与使用

    http://blog.csdn.net/chenggong2dm/article/details/43937433 http://blog.csdn.net/orangleliu/article/d ...

  10. PAT 1020

    1020. Tree Traversals (25) Suppose that all the keys in a binary tree are distinct positive integers ...