五、pink老师的学习笔记——CSS精灵技术(sprite)
5. CSS精灵技术(sprite) 重点
5.1 为什么需要精灵技术
图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。
然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。
pink老师告诉你我们为什么需要精灵技术:
为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度。
出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)。
5.2 精灵技术讲解
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图。
这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来。
我们需要使用CSS的
- background-image、
- background-repeat
- background-position属性进行背景定位,
- 其中最关键的是使用background-position 属性精确地定位。
5.3 精灵技术使用的核心总结
首先我们知道,css精灵技术主要针对于背景图片,插入的图片img 是不需要这个技术的。
- 精确测量,每个小背景图片的大小和 位置。
- 给盒子指定小背景图片时, 背景定位基本都是 负值。
5.4 制作精灵图(了解)
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),那我们要做的,就是把小图拼合成一张大图。
大部分情况下,精灵图都是网页美工做。
我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。
我们可以横向摆放也可以纵向摆放,但是每个图片之间留有适当的空隙
在我们精灵图的最低端,留一片空隙,方便我们以后添加其他精灵图。
结束语: 小公司,背景图片很少的情况,没有必要使用精灵技术,维护成本太高。 如果是背景图片比较多,可以建议使用精灵技术。
五、pink老师的学习笔记——CSS精灵技术(sprite)相关推荐
- 八、pink老师的学习笔记—— CSS用户界面样式(鼠标样式、轮廓线、防止拖拽文本域)
2. CSS用户界面样式 所谓的界面样式, 就是更改一些用户操作样式,以便提高更好的用户体验. 更改用户的鼠标样式 (滚动条因为兼容性非常差,我们不研究) 表单轮廓等. 防止表单域拖拽 2.1 鼠标样 ...
- 四、pink老师的学习笔记——元素的显示与隐藏
1. 元素的显示与隐藏 目的 让一个元素在页面中消失或者显示出来 场景 类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现! 1.1 display 显示(重点) display ...
- Direct3D学习笔记(二)——精灵动画(Sprite)
使用精灵表 精灵表,就是一个包含了多个图片单元的平铺的图像. 我们需要做的就是,算出图片单元的左上角在位图图像中为止,然后从图像中按照精灵的宽度和高度复制出一个源矩形来. 使用这个技术绘制单个帧,我们 ...
- css sprite 按钮,CSS Sprites (CSS 精灵) 技术
CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...
- 【CSS基础学习笔记】精灵图、字体图标、三角形、样式优化
精灵图 CSS精灵技术:能有效地减少服务器接收和发送请求的次数,提高页面的加载速度. 核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了.(主要针对小的背景图片,因为 ...
- pink老师js869集笔记
B站pink老师JavaScript 869集笔记 计算机基础部分 1.编程语言 1.1 编程 编程:就是让计算机为解决某个问题而使用某种程序设计语言编写代码程序,并最终的得到的过程 计算机程序:就是 ...
- amazeui学习笔记--css(布局相关3)--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
- amazeui学习笔记--css(基本样式3)--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
- 我的学习笔记——CSS背景渐变(Gradients)详解
我的学习笔记--CSS背景渐变(Gradients)详解 一.线性渐变(Linear Gradients) 1.语法 background-image: linear-gradient(directi ...
最新文章
- JSONUtil,POJO实体类和JSON互转,
- LeetCode(15):三数之和
- 在html中标记中可以嵌套标记,如何在LESS CSS嵌套类中指定html标记?
- 号和管道符号(|)在不同场景下的使用方法
- 删除远程桌面登陆痕迹
- [html] 如何在IOS下启用WebApp全屏模式?
- python request microsoft graph_Microsoft Graph API:授权未找到
- ORA-01502-对应的快速解决办法(索引或这类索引的分区处于不可用状态)
- hdu1166 敌兵布阵 线段树
- [转]如何:定义和处理 SOAP 标头
- 重物码垛搬运机器人_米克力美AGV:工业机器人的应用场景
- 神器!人工智能分离歌曲中的人声和背景音乐
- 人脸识别活体检测之眨眨眼和张张嘴
- 苹果PD20W快充方案缺货,芯片供应不足,怎么破局?
- 方程检验格式图片_Excel绘制标准曲线全图片教程
- Vsphere平台虚拟机vmdk文件丢失重建
- 看看什么叫穿越失败,我承认我确实笑了
- 搭建一个misskey实例
- IIS反向代理 URL重写 404或500 错误问题的解决方案
- win10 休眠设置无效_windows10系统电脑点击睡眠没反应的解决方法
热门文章
- Linux 监控命令 free
- Django Rest framework Request
- lisp语言cond和if套用_LISP - 决策
- 【ujson】pip安装ujson报错: error:Microsoft Visual C++ 14.0 is required
- 【深度学习】Tensorflow完成线性回归对比机器学习LinearRegression()
- 使用python3连接hiveserver2的方法
- coreData mapView #include
- php基本函数对象,PHP常用函数对象_PHP教程
- 锐浪报表数据源access_kylin+SuperSet实现实时大数据报表的快速开发
- 无名管道pipe使用方法